jQuery中的动画理论干货

【jQuery中的动画】


通过jQuery动画能够轻松地为页面添加精彩的视觉效果

【show()方法和hide()方法】
1、show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在css中的display属性,hide()相当于css中的display:none;这两个方法用来控制内容的“显示”和“隐藏”。
具体结构如下:
$("element").hide();
2、show()方法和hide()方法让元素动起来:这两个方法在不带参数的情况下,相当于css("display","none/block/inline");作用
是立添加显示或隐藏,不会有动画效果,如果希望元素动画起来,可以show()传一个速度参数,速度关键字有
(“slow”,“normal”,“fast”),也可以自定义速度值。hide()方法同样如此。

【fadeIn()方法和fadeOut()方法】
与show()方法不同的是,fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOutah()方法在一定时间内降低元素的不透明度,直到元素消失,fadeIn()则相反。

【slideUp()和slideDown()方法】
这两个方法只改变元素的高度,如果一个元素的display属性为“none”,当调用slideDown()时,这个元素会由上至下延伸显示
,slideUp恰好相反。

【自定义动画方法animate()】
animate()方法自定义动画语法结构为:animate(param,speed,callback);
参数说明:(1)params:一个包含样式属性及值得映射;
(2)第二个为速度参数;
(3)callback:在动画完成时执行的函数,可选。
animate()方法自定义动画还可以实现累加,累减动画,例如:在移动动画上用“+=”或“-=”就可以实现当前位置上的累加或累减,{left:"+=500px"}。
也可以实现"多重动画",既可以同时绑定多个事件处理函数。可以实现同时执行多个动画,也可以实现按顺序执行,这种方式称为
“动画队列”。

【动画中的回调函数】
在某些例子中,如果想在动画的最后一步切换元素的css样式,而不是隐藏元素,直接在后面把fadeOut()方法变成css样式是没有
效果的,动画执行时,css就开始执行,因为css并没有加入到“动画对列”中去。
为了解决这个问题,我们可以使用回调函数对非动画方法实现排队,只要把css()方法写入最后一个动画的回调函数里即可。

【停止动画和判断是否处于动画状态】
1、停止元素的动画
很多时候需要停止匹配元素的动画,使用stop()方法,结构为:stop([clearqueue],[gotoEnd]);
两个参数都是可选的,都是布尔值,分别代表是否清空未执行完的动画对列,和是否直接将正在执行的动画跳转到末状态。
2、判断元素是否处于动画状态
在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,当用户快速点击在某个元素上执行animate动画时,就会出现动画积累,这时就需要判断一下元素是否处于动画状态,如果不处于就添加动画,

代码如下:if(!$(element).is(":animate")){//判断元素是否处于动画状态
//如果当前没有动画,就添加动画
}
3、延迟动画
有时候需要在页面中对动画进行延迟,可以使用delay()方法,他可以推迟动画对列中的函数执行。

【其他动画方法】
jQuery中还有4个专门用于交互的动画方法。
1、toggle()方法:该方法可以切换元素的可见状态,如果元素可见,则切换为隐藏。
2、slideToggle()方法:该方法通过高度变化来切换匹配元素的可见性。当单击“标题”连接后,“内容”会在可见和隐藏两种状
态中切换,不过是通过改变高度来实现的。
3、fadeTo()方法:该方法可以吧元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度,即匹配的元素的
高度不会变化。
4、fadeToggle()方法:该方法通过不透明度变化来切换匹配元素的可见性,这个动画只调整元素的不透明度。

特别注意:animate9)方法,可以用来代替其他所有的动画方法。

都是干货,相关练习还得自己动手。

原文地址:https://www.cnblogs.com/yehui-mmd/p/5898028.html