jQuery中的特效
show,hide(显示,隐藏)
滑动、卷动(slideUp()、sliderDown())
淡入、淡出(fadeIn()、fadeOut())
自定义动画(animate)
Animate中累加累减的方案
[重点]自定义实现列队动画的方式,有两种:
1.在回调函数中再执行一个动画;
2.通过连缀或顺序来实现列队动画。
列队动画方法
//连缀无法实现按顺序列队
$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');
注意:如果动画方法,连缀可以实依次列队,而.css()方法不是动画方法,会在一开始传入列队之前。那么,可以采用动画方法的回调函数来解决。
//使用回调函数,强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow', function () {
$(this).css('background', 'orange');
});
使用.queue()方法
特点:提高代码的可读性
使用.queue()方法模拟动画方法跟随动画方法之后
.queue()中使用next,来继续执行之后的动画
动画相关方法
.stop(clearQueue, gotoEnd)。
参数介绍:
-
clearQueue 传递一个布尔值,代表是否清空未执行完的动画列队;
-gotoEnd 代表是否直接将正在执行的动画跳转到末状态;//强制停止运行中的
$(’.stop’).click(function () {
$(’#box’).stop();
});//带参数的强制运行
$(’.animate’).click(function () {$(’#box’).animate({
‘left’ : ‘300px’
}, 1000);$(’#box’).animate({
‘bottom’ : ‘300px’
}, 1000);$(’#box’).animate({
‘width’ : ‘300px’
}, 1000);$(’#box’).animate({
‘height’ : ‘300px’
}, 1000);
});$(’.stop’).click(function () {
$(’#box’).stop(true ,true);
});
有时在执行动画或列队动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay()方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上。
//开始延迟 1 秒钟,中间延迟 1 秒
$('.animate').click(function () {
$('#box').delay(1000).animate({
'left' : '300px'
}, 1000);
$('#box').animate({
'bottom' : '300px'
}, 1000);
$('#box').delay(1000).animate({
'width' : '300px'
}, 1000);
$('#box').animate({
'height' : '300px'
}, 1000);
});
//停止正在运动的动画,并且设置红色背景
$('.button').click(function(){
$('div:animated').stop().css('background', 'red');
});
动画全局属性
jQuery 提供了两种全局设置的属性,分别为:
.fx.off,关闭页面上所有的动画。
$.fx.interval 属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可能影响浏览器性能。
//设置运行帧数为 1000毫秒
$.fx.interval = 1000;//默认为 13
$('.button').click(function () {
$('#box').toggle(3000);
});
$.fx.off 属性可以关闭所有动画效果,在非常低端的浏览器,动画可能会出现各种异常问题导致错误。而 jQuery 设置这个属性,就是用于关闭动画效果的。
//设置动画为关闭 true
$.fx.off = true; //默认为 false