如何使动画在无限循环中运行

how make the animation runs in a infinite loop

本文关键字：运行 无限循环 何使 动画      更新时间：2023-09-26

我有当前运行的代码

MyTry

我想做的是让动画进入无限循环怎么办??

我想再次调用相同的函数或者我不知道是什么

表示动画在最后一个元素结束时反复播放

(function($) {
$.fn.fade = function() {
        return this.each(function(index, item) {
            var $this = $(this).siblings();
            $(item).hide().stop();
            if ($(item).index() == $(this).siblings().length - 1) {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow', function() { 
                    /* here is the last element finishing  */
                });
            } else {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow');
            }
        });
    };
    
})(jQuery);
 $('.tst').fade();

编辑:我离开动画运行和来检查答案所以我看到了一个奇怪的行为

如何修复

最直接的方法是给函数一个名字并再次调用它:http://jsfiddle.net/pimvdb/SxTgy/4/.

$.fn.fade = function x() {
        var _this = this; // keep the 'this' value

在最后一个动画之后，再次调用x，传递它的this值:

x.call(_this); // same as x() but it sets the 'this' value inside it correctly

请注意，这样的"命名函数表达式"在IE8上有一定的怪癖-

试试这个(尽管你必须适应你的插件结构):

var elements = $('ul > li');
(function fade(idx) {
  $(elements).eq(idx || 0).fadeIn(1500).fadeOut(1500, function () {
    fade(idx < elements.length - 1 ? idx + 1 : 0);
  });
}());
相关文章：