jQuery

jQuery复习4:jQuery中的动画效果

Posted by mieruko on 2016-12-17

前言

动画效果也是jQuery库吸引人的地方。
通过jQuery的动画方法，能够轻松地为网页添加精彩的视觉效果，给用户一种全新的体验。

常用的几个好基友的api

show()方法和hide()方法

这两个方法是一对好基友。
调用hide()方法时，把元素的display属性设置为none。
当调用show()方法时，把元素的display属性设置为block或者inline等等非none的值。

注意当你不传参数的时候，它们两个都是刷的一下出现，刷的一下就消失，不会有任何的过渡。
有的时候我们希望我们的动画是有速度的，这时候我们可以往括号里面传参数： 

1
2
3
4
5
6
// 200ms
element.show("fast");
// 400ms
element.show("normal");
// 600ms
element.show("slow");

楼上可以分别在200ms,400ms,600ms内显示元素。
当然，如果这个速度满足不了你的需要，你可以直接往里面传数字: 

1
element.show(1000);

hide方法同理。

当我们往里面传了数字的时候，元素会在指定的时间段内从宽度，高度和透明度三个维度进行增加或者减少，最终达到出现或者消失的效果。

fadeIn()和fadeOut()方法

这对好基友比上一对的功能单一多了，它就是改变元素的透明度。

fadeIn()会在你指定的一段时间里增加元素的不透明度，然后渐渐显现它。
fadeOut()会在你指定的一段时间里减少元素的不透明度，然后渐渐让它消失，最终display:none。

用法和上面差不多，都是通过传参数改变速度。

不透明度的变化最终值只能是0或者1。

slideUp()方法和slideDown()方法

这个方法只会改变元素的高度。
如果一个元素的display为none,调用slideDown()方法时，它会从上到下延伸显示。
slideUp()方法正好相反。

tip: jQuery中的任何动画效果，都可以指定3种速度参数，即”slow”, “normal”和”fast”。对应的时间长度就是我们上面提到的600ms, 400ms, 200ms。
使用速度关键字的时候记得加引号，使用自定义速度的时候传入数字就行。

用animate()来自定义动画

上一个小节介绍的几对好基友，事实上无法满足我们其它情况下的一些需求。为此，我们需要更灵活的运动方式。所以我们还有animate()方法可以给我们自定义运动方式。

语法结构: 

1
animate(params, speed, callback);
  • params: 一个包含样式属性和值的对象
  • speed: 速度参数， 可选
  • callback: 在动画完成时的回调函数，可选

同时改变多个属性

1
2
3
4
element.animate({
    left: "400px",
    height: "200px"
},3000);

顺序改变多个属性

1
2
element.animate({left: "500px"}, 3000)
       .animate({height: "200px"}, 3000);

回调函数的使用

有时候，我们想要在最后一步切换元素的css样式: 

1
css("border", "5px solid blue");

你如果把这个方法添加到了你的动画方法后面，那么你会发现在刚开始执行动画的时候，css方法就被执行了。
因为css方法并不会加入到动画队列中，而是会立即执行。
只有动画方法才会排队。

因此我们可以使用回调函数来给非动画方法排队: 

1
2
3
4
element.animate({left: "500px"}, 3000)
       .animate({height: "200px"}, 3000, function(){
            $(this).css("border", "5px solid blue");
        });

其它常见的动画方法

toggle()方法

toggle()方法可以切换元素的可见状态。
如果元素是可见的，那么切换为隐藏的。
如果元素是隐藏的， 那么切换为可见的。

slideToggle()方法

和toggle()方法类似，不过是通过改变元素高度实现的。

fadeToggle()方法

和toggle()方法类似， 不过是通过改变元素透明度实现的。

fadeTo()方法

把元素的不透明度以渐进的方式调整到指定的值。

停止动画和判断是否处于动画状态

停止元素的动画

停止动画需要使用到stop()方法。
stop()方法的语法结构: 

1
stop([clearQueue], [gotoEnd]);
  • clearQueue参数，布尔值，表示是否清空未完成的动画队列
  • 布尔值， 表示是否将当前正在执行的动画跳转到末状态。

判断元素是否处于动画状态

用is()方法: 

1
element.is(":animated");

延迟动画

用delay()方法： 

1
2
3
element.animate(animate信息)
       .delay(1000)
       .animate(animate信息);

如此就可以推迟队列中动画的执行。

小结

一定要注意这个排队问题。
如果你想让不会排队的方法排队，一定要把它写进回调函数或者queue()方法中。

FEATURED TAGS
jQuery