`

如何让div渐变消失

 
阅读更多
下面的代码可以使“添加成功”四个字4000毫秒之后渐变消失,使用slideUp进行控制,里面的毫秒参数也可以改成slow,normal,fast三个参数,setTimeout方法用来控制消失的时间。
<script type="text/javascript">
	    $(document).ready(function() {
	       var add = $("#message");
	          add.slideDown(2000);
	          setTimeout(function(){add.slideUp(2000);},4000);
	    });
	</script>
	<div id="message">
		添加成功!
	</div>
0
3
分享到:
评论

相关推荐

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来实现鼠标感应的渐变显示和隐藏DIV层的效果。 首先,我们来理解一下核心的HTML结构。在这个例子中,我们有一个ID为"tip"的DIV元素,它是...

    loading div层

    一旦内容加载完毕,这个层就会消失,让用户能够看到完整的内容。 1. **纯CSS加载效果** CSS3提供了丰富的动画和过渡属性,可以用来创建各种动态的加载效果。例如,可以使用`@keyframes`规则定义一个动画,然后将其...

    div特效(二十几种总有你喜欢的)

    这些`div`特效不仅限于上述的两种,还可能包括轮播图、滑动门、折叠面板、悬停效果、渐变背景、响应式布局等多种样式和功能。例如,轮播图可以通过CSS和JavaScript实现图片或内容的自动切换;滑动门效果则利用`z-...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    2. **渐变(Gradients)**:CSS3支持线性渐变和径向渐变,让我们可以创建各种色彩过渡效果。在这个案例中,我们可能会使用线性渐变作为遮罩的背景色,以实现从透明到半透明的颜色变化。 3. **伪类选择器(Pseudo-...

    JS弹窗带有背景颜色会渐变效果遮罩住背景

    在JavaScript(JS)中,创建一个带有渐变背景色并能遮罩住页面背景的弹窗效果是一项常见的任务,尤其在网页交互设计中。这种效果能够提供更好的用户体验,因为渐变遮罩可以使用户更加专注于弹出的内容,同时不完全...

    CSS3,线性渐变(linear-gradient)的使用总结

    假设我们有一个`&lt;div&gt;`元素,并希望为其应用从上到下的渐变效果,渐变颜色从浅灰色`#ccc`过渡到黑色`#000`: ```html &lt;div class="example"&gt;&lt;/div&gt; ``` ```css .example { width: 150px; height: 80px; ...

    网站素材下载 CSS+DIV网页样式

    CSS3的引入更是带来了更多的样式功能,如渐变、阴影、多列布局、媒体查询等,使得响应式设计成为可能,使网页能够适应不同设备的屏幕大小。 其次,DIV是HTML中的一个无语义元素,常用于创建网页布局结构。通过设置...

    JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    当鼠标悬停在页面的某个区域上时,通过CSS和JavaScript相结合的方法让一个原本不可见的DIV框渐渐显示出来。当鼠标移开时,DIV框则渐渐消失。整个过程涉及到的动画效果,需要通过定时触发函数,逐步改变DIV框的样式来...

    JS显示隐藏DIV(动画效果)

    例如,可以设置一个初始值,然后通过定时器逐步增加或减少这些值,同时结合`transition`,使得元素在一定时间内逐渐出现或消失。 下面是一个简单的例子,展示了如何使用JavaScript实现渐显和渐隐效果: ```...

    html+css 实现登录页面(背景动态渐变+按钮动态波纹)

    然后,创建两个伪元素,分别模拟波纹的起始和结束状态,并通过动画让它们扩展并消失。例如: ```css .ripple-effect { position: relative; overflow: hidden; border: none; background: transparent; color:...

    ajax提示信息-2秒后消失

    /* 使用渐变消失动画 */ .fadeOut { opacity: 1; transition: opacity 0.5s ease-out; } .fadeOut.hide { opacity: 0; } ``` 通过以上步骤,我们就能够实现一个在Ajax提交数据成功后,2秒内自动消失的提示信息...

    S渐变显示-收缩效果

    首先,让我们理解“渐变显示”和“收缩效果”。渐变显示通常指的是元素从不可见逐渐变为可见的过程,而收缩效果则是指元素从完全展开的状态逐渐缩小到不可见。这两种效果常常结合在一起,用于用户交互时增加视觉吸引...

    登录取消弹层css+div

    它通常出现在用户尝试进行登录操作时,提供一个可选的取消按钮或者提示信息,让用户能够方便地撤销登录请求或者关闭弹出的对话框。这个主题涉及到CSS(Cascading Style Sheets)和HTML(Hypertext Markup Language)...

    呈斜角渐变显示隐藏的图片列表

    图片列表样式,图片会从斜角方向滚动依次显示或者消失,效果不错,懒人之家推荐下载

    jquery div模态窗口的简单实例

    它首先移除背景遮罩层,然后将模态窗口的位置设置回原点,并使其在200毫秒内渐变消失。 以下是JavaScript代码中的两个关键函数: ```javascript function popupDiv(div_id){ // 代码省略,具体实现与上面描述一致 ...

    div css3样式表制作css3图片聚光灯特效

    这个动画会让元素在0%到50%的时间段内逐渐显现并放大,然后在剩余时间里逐渐消失。 接下来,我们需要将这个动画应用到图片上。假设我们有一个id为"spotlight"的`div`,我们可以这样写: ```css #spotlight { ...

    CSS3实现10种Loading效果

    通过@-webkit-keyframes定义加载动画,使用animation属性设置动画的时长、迭代次数、填充模式等,并通过nth-child选择器为每个加载条设置不同的动画延迟时间,让它们依次出现,从而形成一个连续的加载效果。...

    CSS3图片向上3D翻转渐隐消失特效.zip

    2. **渐变消失效果**: 这种效果通常结合CSS3的`opacity`属性来实现。`opacity`可以设置元素的透明度,值范围从0(完全透明)到1(完全不透明)。在翻转过程中逐渐减小`opacity`值,可以达到元素由可见逐渐变为不...

    jQuery使用fadeout实现元素渐隐效果的方法

    其中,fadeout方法是jQuery中一个非常实用的方法,它可以让元素以渐隐的方式消失,从而给用户带来平滑的视觉体验。 fadeout方法属于jQuery的动画方法之一,它的基本作用是让选定的元素逐渐变为透明,直到完全不可见...

    JS实现简单tab选项卡切换

    它隐藏了所有内容`&lt;div&gt;`,并为选项卡`&lt;li&gt;`设置了边框、渐变背景和鼠标悬停时的样式。当`&lt;li&gt;`具有"cur"类时,表示当前选中状态,背景变为白色,下边框消失。对应的`#listCon`中的`&lt;div&gt;`也应用"cur"类,以使其可见...

Global site tag (gtag.js) - Google Analytics