- 1.显示隐藏动画
- show()方法
(1):
// 不带参数,没有动画
$("div").show();//作用等同于css(“display”, ”block”)
(2):
//参数为数值,表示:执行动画时长
$("div").show(2000);//单位为毫秒(ms)
(3):
//参数为字符串,是jQuery预设的值,共有三个,分别是:slow、normal、fast
$("div").show(“slow”); //slow:600ms、normal:400ms、fast:200ms
(4):
// 参数一可以是数值类型或者字符串类型
// 参数二表示:动画执行完后执行的回调函数
$("div").show(2000, function() {});
hide()方法(同show一样)
$("div").hide(); $("div").hide(1000); $("div").hide(“slow”); $("div").hide(1000, function(){});
toggle()方法
$("div").toggle(speed,callback);
//参数一是动画的执行时长(可以是指定字符或毫秒),参数二是动画执行完成后的回调函数。
$("div").toggle(1000);
//切换元素的可见状态。如果元素是可见的,切换为隐藏;如果元素是隐藏的,切换为可见的。
- 2.滑入滑出动画
- slideDown()方法
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
$("div").slideDown(speed,callback);
//作用:让元素以下拉动画效果展示出来
- slideUp()方法
$("div").slideUp(speed,callback);
//作用:让元素以上拉动画效果隐藏起来
- slideToggle()方法
$("div").slideToggle(speed,callback);
//切换滑入滑出效果
- 3.淡入淡出动画
- fadeIn()方法
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
$("div").fadeIn(speed, callback);
//作用:让元素以淡淡的进入视线的方式展示出来
- fadeOut()方法
$("div").fadeOut(1000,callback);
//作用:让元素以渐渐消失的方式隐藏起来
- fadeToggle()方法
$("div").fadeToggle('fast',function(){});
//作用:通过改变不透明度,切换匹配元素的显示或隐藏状态
- fadeTo()方法
$("div").fadeTo(speed, opacity, callback) ;
// 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
- 4.自定义动画
- 注意:所有能够执行动画的属性必须只有一个数字类型的值。
- 动画支持的属性:
http://www.w3school.com.cn/jquery/effect_animate.asp - 5.停止动画
- stop()
作用:停止当前正在执行的动画 - 为什么要停止动画?
如果多个动画在同一元素上执行,对这个元素来说,后面的动画将被放到队列中,从而形成动画队列。(联想:排队进站)
上一个动画执行完成,下一个动画才能执行,例如下拉菜单,这样的效果有时不是我们想要的。 - 解释:
当调用stop()方法后,当前动画停止于当前样式的值(不会到达目标值),队列中的下一个动画会立即开始。如果参数clearQueue被设置为true,那么队列中剩余的动画就被删除了,永远不会再执行。如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,回调函数也会立即执行。