转载自个人博客
jQuery自带动画效果
一. 显示、隐藏
jQuery中.show()
为显示方法,.hide()
为隐藏方法。
在无参数的时候,只是硬性的显示内容和隐藏内容。就不用代码来演示了,.hide()
方法其实就是把对象的css设为display:none
;而.show()
方法会保留原来的display值,并进行设置。但是在一些场景中会有所改变,在后面进行说明)。
这两个方法都可以带参数。
先来说明第一个参数:
第一种用法是传入数字,为毫秒数,表示动画过渡效果的时间。里面同时富含了匀速变大变小,以及透明度变换。
<button class="show">显示</button>
<button class="hide">隐藏</button>
<div id="box">块</div>
<script>
$(".show").click(function() {
$("#box").show(1000);//显示用了一秒
});//可以看到很明显的动画过渡效果。
$(".hide").click(function() {
$("#box").hide(1000);
});
</script>
第二种用法是传入一个字符串。”slow”、”normal”和”fast”,分别对应600毫秒、400毫秒和200毫秒。在传入空字符串或其他字符串参数时,默认为400毫秒。
传入一个对象,后面的参数就不能填了,都在对象中。这个比较强大,整合了
show()
方法的多种参数实现效果外,还有一些其他的方法,比如可以动画执行中的状态,来执行函数。比较复杂,而且日常使用的话,现在这个就已经够了,在这里并不做讲述,有兴趣的可以自己参考手册。
特别注意:在传入了速度之后,内联元素inline,隐藏显示过后会变成内联块,inline-block。假设你给一个内联元素的css中设置了宽高,本来不生效,但是在执行隐藏显示后宽高生效
第二个参数:为可选参数,easing运动方式,这个参数,大部分参数值需要通过插件来使用,以后再来讲解。自带的参数有两个:”swing”(缓动)、”linear”(匀速),不填时,默认为”swing”。(注意这里传入一个错误参数,会报错)
第三个参数:可选,回调函数,第一个动画执行完毕后执行,实现链式动画。
<button class="show">显示</button>
<button class="hide">隐藏</button>
<div class="test">一</div><div class="test">二</div><div class="test">三</div><div class="test">四</div>
<script>
$('.show').click(function () {//链式动画,递归自调用
$('.test').first().show('fast', function testShow() {
$(this).next(".test").show('fast', testShow);
});//注意next中的限制条件,不然会干扰其他的元素,执行该函数。
});
$('.hide').click(function () {
$('.test').last().hide('fast', function() {
$(this).prev(".test").hide('fast', arguments.callee);
});//这里只是展现有arguments.callee这种方式,并不推荐使用,建议使用函数递归自调用
});
</script>
我们在使用.show()
和.hide()
的时候,如果需要一个按钮切换操作,需要进行一些条件判
断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle()
。使用方法一样。
$(".toggle").click(function(){
$("div").toggle("fast");
});
二. 滑动、卷动
jQuery 提供了一组改变元素高度的方法:.slideUp()
、.slideDown()
和.slideToggle()
。顾名思义,向上收缩(卷动)和向下展开(滑动)。
$('.toggle').click(function () {
$('div').slideToggle();
});
注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。不展开讲
三. 淡入、淡出
jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()
和.fadeOut()
,分别表示淡入、
淡出,当然还有一个自动切换的方法:.fadeToggle()
。
但是上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没
有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()
方法,使透明度到达指定值:
$(".toggle").click(function() {
$("#box").fadeToggle('slow');
});
$(".to").click(function() {
$("#box").fadeTo('slow', 0.3);//表示30,jQuery中使用的是百分比的形式来设置
});
注意:最先点击to
透明度变成0.3,再点击toggle
,第一次点击隐藏,第二次点击显示透明度为0.3!(回到原有设置)
淡入、淡出和上面的显示、隐藏效果一样,具有相同参数
自定义动画
jQuery提供了上面几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个
.animate()
方法来创建我们的自定义动画,满足更多复杂多变的要求。
强烈建议先看我的《JavaScript完美运动框架的进阶之旅》,使用JS基本实现了自定义动画,只不过jQuery的更加全面完善,当然也更加复杂。
必传参数只有一个,对象,实现动画:
$("button").click(function() {
$("#box").animate({
width: "200px",
height: "500px"});
});
这段代码已经实现了多重动画同步运动的效果,使用键值对的方式,来表明运动动画终点的位置。在实现上下左右移动时,需要结合CSS,把物体属性设置绝对定位!
第二个参数,可选,使用字符串时如同上面一样的3个值表示不同的时间(默认400ms),数字类型时,使用毫秒方式。直接跟在第一个参数之后就好
第三个参数,可选,也和上面一样,easing运动方式,自带的参数有两个:”swing”(缓动)、”linear”(匀速),不填时,默认为”swing”。(注意这里传入一个错误参数,会报错)
第四个参数,可选,回调函数,在动画执行完毕后执行,可实现链式动画。
下面进行一些特殊的说明:
自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。
$("button").click(function() {
$("#box").animate({//必须先设置CSS的绝对定位。
left:"+=100px"
});
});
主要是说一下自定义动画中的链式动画,有两种形式:
在回调函数中再执行一个动画,这个没什么好说的。
通过连缀或顺序来实现链式动画。
通过依次顺序实现链式动画
$('button').click(function () {
$('#box').animate({'left' : '100px'});
$('#box').animate({'top' : '100px'});
$('#box').animate({'width' : '300px'});
});
注意:如果不是同一个元素,就会实现同步动画
通过连缀实现链式动画
$('button').click(function () {
$('#box').animate({'left' : '100px'})
.animate({'top' : '100px'})
.animate({'width' : '300px'});
});
链式动画进阶
之前我们已经可以实现链式动画了,如果是同一个元素,可以依次顺序或连缀调用。如果是不同元素,可以使用回调函数。但有时链式动画太多,回调函数的可读性大大降低。为此,jQuery 提供了一组专门用于链式动画的方法。
$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');
这段代码中,css方法会在一开始就执行。因为动画方法可以用连缀来实现依次排列,但是css方法不是,会在一开始传入队列之前。如何解决呢?回调函数当然可以实现。
$('button').click(function () {
$('#box').slideUp('slow').slideDown('slow',function (){
$(this).css('background', 'orange');
});
});
这当然没问题,但是那并不是我们应该做的,因为这样可读性太差了,链式动画一多呢?原本的动画都不清晰了吧?jQuery为我们实现了一个类似回调函数的方法:.queue()
。jQuery 的.queue()
的回调函数可以传递一个参数,这个参数是 next 函数,在结尾处调用这个 next()方法即可再连缀执行列队动画。(不这样使用的话,后续动画效果无法实现)
$('button').click(function () {//在同一个元素直接这样写就可以了。
$('#box').slideUp('slow')
.slideDown('slow')
.queue(function (next) {
$(this).css('background', 'orange');
//next();//animate的动画效果不会生效,因为把next()注释掉了。
})
.animate({//记得设置绝对定位
height: "200px",
left: "100px"
});
});
.queue()
方法还有一个功能,就是可以得到当前链式动画剩余的长度(包括当前的动画)。fx 是默认链条的参数。
//把上面的代码的第一个动画改装成如下模样时,会弹出4。
$('#box').slideUp('slow',function (){
alert($(this).queue('fx').length);
})
jQuery 还提供了一个清理链式动画的功能方法:.clearQueue()
。把它放入一个链式的回调函数或.queue()
方法里,就可以把剩下未执行的链条给截断。
//清理后续链式调用
$('#box').slideDown('slow', function () {$(this).clearQueue()});
动画相关方法与全局属性
停止动画
有很多时候,我们需要停止正在运行中的动画,jQuery中为此提供了一个.stop()
方法。
它有三个可选参数:
queue 类型: String 停止链式动画的名称。(比较少用到,若存在,后两个参数都是指向该链式动画)
clearQueue类型: Boolean一个布尔值,指示是否取消后续的链式动画。默认 false.
jumpToEnd 类型: Boolean一个布尔值指示是否当前动画立即完成。默认false.
说明:
在无参数,且为链式动画时,调用
.stop()
方法,只是立即停止当前正在进行的动画,后续动画继续执行。传入一个true时,立即停止动画,并且清空后续所有动画。
传入2个true时,立即停止,并且跳转到当前动画的结束位置,后续动画也不再执行。
代码如下:有兴趣的自行测试
<button class="start">动画</button>
<button class="stop">停止</button>
<div style="position: absolute;height: 50px;width: 50px;background-color: #0B71E6;top:30px">12</div>
<script type="text/javascript">
$('.start').click(function () {
$('div').animate({'left' : '300px'}, 1000)
.animate({'top' : '300px'}, 1000)
.animate({ 'width' : '300px'}, 1000)
.animate({'height' : '300px'}, 1000);
});
$(".stop").click(function() {
$("div").stop(true,true);
});
</script>
延迟动画
有时在执行动画或链式动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay()
方法。参数为延迟时间,单位为毫秒数。这个方法可以在动画之前设置延迟,也可 、以在列队动画中间加上。直接在上面代码任意地方加都可以,比较简单,自行测试吧。
获取正在进行的动画
在选择器的那篇文章中中,我们提到过一个过滤器:animated
,这个过滤器可以判断出当前运动的动画是哪个元素。通过这个特点,我们可以避免由于用户快速在某个元素执行动画时,由于动画积累而导致的动画和用户的行为不一致。
对上面代码进行一些改造,将原div进行复制,添加到其后,给原div添加一个id并且在动画效果中改为该元素运动
$('.stop').click(function(){
$('div:animated').stop().css('background', 'red');
//可以看到只有运动的div背景变色,而未移动的div不改变背景色。
});
动画全局属性
jQuery 提供了两种全局设置的属性,分别为:$.fx.interval
,设置每秒运行的帧数;$.fx.off
,关闭页面上所有的动画。
$.fx.interval
属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可能影响浏览器性能。
设置运行帧数为 1000 毫秒:$.fx.interval = 1000;
设置动画为关闭 true:$.fx.off = true;
默认为false