Question

我不确定如何提出这个问题。我为横幅制作了一个jQuery函数。

$(document).ready(function() {
  ionanim();
  setInterval(ionanim, 12000);

  function ionanim() {
    $(function () {
      $('.ion1anim').fadeIn(500, function () {
        $(this).delay(5000).fadeOut(500);
      });
    });

    $(function () {
      $('.ion2anim').delay(6000).fadeIn(500, function () {
        $(this).delay(5000).fadeOut(500);
      });
    });
  };

});

完整动画的链接：http://jsfiddle.net/L8XHL/11/

但是对于setInverval上的每个intervatl，动画在相互重叠一段时间后会相互靠近。

我做错了什么吗？

Answer 1

间隔和动画不足以处理您需要的时间。我建议使用自动执行功能，以免它重叠。

此外，您正在过度使用文档就绪处理程序。请停止。

http://jsfiddle.net/L8XHL/13/

$(document).ready(function () {
    ionanim();
    function ionanim() {
        $('.ion1anim').fadeIn(500, function () {
            $(this).delay(5000).fadeOut(500, function () {
                $('.ion2anim').fadeIn(500, function () {
                    $(this).delay(5000).fadeOut(500,ionanim);
                });
            });
        });
    }
});

我会进一步修改它，使其更像滑块，这样就可以添加无限数量的项目而无需巨大的代码金字塔。

http://jsfiddle.net/L8XHL/17/

$(document).ready(function () {
    $(".ionbanner .bottom div").first().siblings().hide();
    anim();
    function anim() {
        var curr = $(".ionbanner .bottom :visible");
        var next = curr.next();
        if (next.length == 0) {
            next = curr.siblings().first();
        }
        curr.delay(5000).fadeOut(500,function(){
            next.fadeIn(500,anim);
        });
    }
});

Answer 2

或者您可以尝试这样的事情：http://jsfiddle.net/L8XHL/16/

$(document).ready(function() {
    var anim1 = function() {
            $('.ion1anim').fadeIn(1000, anim1Callback);
        },
        anim1Callback = function() {
            $('.ion1anim').fadeOut(1000, anim2);
        },
        anim2 = function() {
            $('.ion2anim').fadeIn(1000, anim2Callback);
        },
        anim2Callback = function() {
            $('.ion2anim').fadeOut(1000, anim1);
        };

    anim1();
});

Jquery函数延迟缩短每个Interval

2 个答案: