jQuery $.animate()多个元素,但只有一次触发回调

前端之家收集整理的这篇文章主要介绍了jQuery $.animate()多个元素,但只有一次触发回调前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果您选择一个类或一组元素来使用jQuery进行动画处理:
$('.myElems').animate({....});

然后也使用回调函数,你最终得到了很多不必要的animate()调用

var i=1;
$('.myElems').animate({width:'200px'},200,function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'},300,function(){        
        if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
        i++;
    });
});

可以说这只是坏的代码和/或设计 – 但是有一些我可以做的,既避免有许多animate()调用,只有其中一个使用回调,并有一个不必要的回调执行和旋转我的代码/预期行为?

理想情况下,我只能编写一个只能运行一次的一次性回调 – 否则可能有一种有效的方法来测试某些东西是否已经被jQuery动画了?

示例:http://jsfiddle.net/uzSE6/(警告 – 这将显示一个警报框的加载)。

解决方法

你可以使用 when喜欢:
$.when($('.myElems').animate({width: 200},200)).then(function () {
  console.log('foo');
});

http://jsfiddle.net/tyqZq/

替代版本:

$('.myElems').animate({width: 200},200).promise().done(function () {
  console.log('foo');
});

猜你在找的jQuery相关文章