代码之家 › 专栏 › 技术社区 › 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 回复 | 直到 8 年前

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根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前