代码之家 › 专栏 › 技术社区 › Oren Hizkiya

JQuery回调帮助

jquery javascript

Oren Hizkiya · 技术社区 · 15 年前

my previous question slideshow . 问题是,我希望这个动画在到达最后一个元素后从一开始就继续。我觉得这很简单,我只需要在JQuery函数中放置一个无限循环,但是由于某种原因,如果我插入一个无限循环,就不会显示动画,页面就会挂起。我在文档中也找不到任何关于如何正确放置回调的内容。当动画完成对每个对象的迭代后,如何让代码从动画的开始重新启动?为什么无限循环不是正确的方法?

<div id="slideshow">
    <p>Text1</p>
    <p>Text2</p>
    <p>Test3</p>
    <p>Text4</p>
</div>

<script>
$(document).ready(function() {

var delay = 0;
$('#slideshow p').each(
    function (index, item)
    {
        $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow');
        delay += 2200;
    }
);

});
</script>

2 回复 | 直到 9 年前

Nick Craver 15 年前

$(function() {
  var d = 2200;
  function loopMe() {
    var c = $('#slideshow p').each(function (i) {
              $(this).delay(d*i).fadeIn('slow').delay(800).fadeOut('slow');
            }).length;
    setTimeout(loopMe, c * d);
  }
  loopMe();
});

You can give it a try here

而不是跟上 delay 0 ,第一个根本不会延迟,然后2200ms乘以元素的数量,再做一次循环。在上述代码中 d c 元素的计数。

pepkin88 15 年前

这个解决方案在我看来更优雅,也更自然,更容易控制,正确编辑延迟值等。我希望你会喜欢它。

$(document).ready(function () {
    var elementsList = $('#slideshow p');
    function animationFactory(i) {
        var element = $(elementsList[i % elementsList.length]);
        return function () {
            element.delay(200).fadeIn('slow').delay(800).fadeOut('slow', animationFactory(i + 1));
        };
    }
    animationFactory(0)();
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前