jQuery中的动画

2017-03-04  本文已影响0人  AuthorJim

jQuery中的动画

show()方法和hide()方法

控制元素的显示与隐藏,可以为该方法添加参数,使得元素可以动起来。

fadeIn()方法和fadeOut()方法

与show()方法不同的是,fadeIn()与fadeOut()方法只改变元素的不透明度。

slideDown()方法和slideUp()方法

slideDown()方法和slideUp()方法只会改变元素的高度

自定义动画方法animate()

animate(params,speed,callback);

  1. params:一个包含岩石属性及值的映射,比如{property1:'value1',prperty2:'value2',...}
  2. speed:速度参数,可选
  3. callback:在动画完成时的执行函数,可选
    综合动画示例
$('div').mouseover(function () {
    $(this).animate({
        left: '+=300px',
        top: '+=300px',
        width: '200px',
        height: '200px',
        opacity: '0.3'
    },2000).animate({
        left: '+=300px',
        top: '-=300px',
        width: '100px',
        height: '100px',
        opacity: '1'
    },2000).fadeOut('3000');
});

自定义动画方法animate()

在上例中,若想在动画完成之后为div元素添加一个边框css('border','1px solid #0f0')。这样并不能得到预期的效果,而实际效果就是,刚开始执行动画的时候,css()的方法就执行了。其根本原因在于css()并不会加入到动画队列中,而是会立即执行。
如果想要达到预期的效果,我们需要把使用回调函数callback来对非动画方法实现排队

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

1.停止元素的动画

很多时候我们需要停止匹配元素正在进行的动画,此时我们需要使用stop()方法
stop([clearQueue],[gotoEnd]);
参数clearQueue与gotoEnd都是可选的,都为Boolean值。clearQueue表示立即清空为执行完的动画,gotoEnd代表是否直接将正在执行的动画跳转到末状态。

直接使用stop()方法,则会立即停止当前正在执行的动画,如果接下来还有动画等待执行,则以当前状态开始接下来的动画。

当为一个使元素绑定hover事件之后,用户把光标移入元素时会触发动画效果,而当这个动画还没结束时,用户就将光标移出了。那么改变移出时执行的动画就会被放入队列中,等待光标移入的动画结束后再执行。因此如果光标 的移入移出过快的话,就会导致动画效果与光标的动作不一致。此时只需要在光标的移入移出的动画之前加入stop()方法,就可解决。

$('div').hover(function () {
    $(this).stop().animate({
        width: '200px',
    });
},function () {
   $(this).stop().animate({
        height: '50px'
    });
});

可是如果遇到组合动画

$('div').hover(function () {
    $(this).stop().animate({
        width: '200px',
    }).animate({
        left: '+=300px',
    });
},function () {
   $(this).stop().animate({
        height: '50px'
    });
});

这时的stop()只会停止正在进行的动画。如果动画正在执行第一阶段(改变width)鼠标触发移出事件之后,只会停止当前的动画,并继续执行改变left的动画,而光标移出事件要等这个动画完成后才能执行。在这种情况下,我们可以设置stop()方法的第一个参数为true,此时程序会把当前元素接下来的尚未执行动画全部清空。第二个参数gotoEnd用于直接让当前动画到达结束时刻,通常用于后一个动画需要基于前一个动画的末状态的情况。

2. 判断元素释放处于动画状态

在使用animate()动画的时候,要避免动画积累导致动画与用户的行为不一致。解决办法就是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画。
及其重要,特别常用

if (!$(element).is(':animated')){   //判断元素释放处于动画状态
    //如果没有处于动画状态,则添加新动画
}

3. 延迟动画

在动画执行过程中,如果想对动画进行延迟操作,可以使用delay()方法

 $(this).animate({left: '400px'},3000)
        .delay(1000)
        .animate({top: '100px'},2000)
        .delay(2000)
        .animate({height: '100px'},800);

4. 其他动画方法

动画队列

上一篇下一篇

猜你喜欢

热点阅读