jquery动画可以通过编程链接吗

Can jquery animations be chained programmatically?

本文关键字：链接 编程 可以通过 动画 jquery      更新时间：2023-09-26

我有这个代码：

jQuery('#flash').animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 200)
                .animate({opacity: 0.35}, 200)
                .animate({opacity: 0}, 600)

我还没有决定要改变它的状态多少次。有没有一种方法可以通过编程方式链接动画，而不是通过编辑动画链来添加/删除链接元素？

不，如果不编辑动画队列，就无法链接动画。如果你想链接一个变量，但次数有限，你可以很容易地使用一个循环：

var flash = $("#flash");
for (var i=0; i<n; i++)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200);

如果你想要一个无休止的循环，或者一个在未来满足条件时停止的循环，你想在动画队列上挂起一个回调，重新启动函数：

var flash = $("#flash");
function anim() {
    // if (condition)
    flash.animate({opacity: 0.35}, 200).animate({opacity: 0}, 200, anim);
                                            // call "recursively": ^^^^
}
anim();

如果我理解正确，你只需要一个FOR循环：

function animate_n_times(n) {
   var flash = $('#flash');
   for(var i=0;i<n;i++) {
      flash.animate({opacity: 0.35}, 200)
           .animate({opacity: 0}, 200);
   }
}

然后调用类似：

animate_n_times(3);

如果你想要的是循环，你可以使用循环来链接动画。

var $flash = jQuery('#flash'), i;
for (i = 0; i < 10; i++) {
    $flash = $flash.animate({opacity: 0.35}, 200)
                   .animate({opacity: 0}, 200);
}

有一个较短的替代方案，使用扩展jquery timing：

动画给定次数：

$('#flash').repeat().animate({opacity:0.35}, 200)
    .animate({opacity:0}, 200).until(10);

作为无尽循环：

$('#flash').repeat().animate({opacity:0.35},200).animate({opacity:0},200,$);

有关详细信息，请参阅.erepeat（）、.intile（count）和.animate（…，$）.的API

相关文章：