- 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()方法，那么元素会立即隐藏掉。如果存在回调函数，回调函数也会立即执行。
网友评论