jquery函数每个间隔的延迟时间缩短

我不知道如何提出这个问题。我为横幅做了一个jQuery函数。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/

但每个intervatl在setInverval动画走了一段时间，他们相互重叠后相互靠近。

我做错了什么？

来源

2014-01-27 Alen Saqe

没有，你没有做错什么，时机刚好是不是因为你需要它准确做这样的事情。您应该使用回调而不是静态延迟来确保事件按照您的意愿发生。在这种情况下，我也会建议不要使用setInterval。 –

那么什么是最好的循环功能，而不是setInterval？这是基于我所做搜索的最佳解决方案，出现并不完美，因为你建议！ –

当所有动画完成时调用自身的函数。 –

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

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

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); 
     }); 
    } 
});

来源

2014-01-27 16:38:21

感谢您的修复。通过在jsfiddle中过度使用文档准备好的处理程序？就像曾经的jsfiddle domReady并再次在脚本中一样？ –

不，你有'$（function（）{}）'包装每个动画。 '$（function（）{}）'与'$（document）.ready（function（）{}）是一样的''看到更新，我添加了另一种更清洁和更容易维护的方法（可以添加更多项目循环而不修改代码） –

或者你可以尝试这样的事：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(); 
});

来源

2014-01-27 16:46:58

这也适用，谢谢你的贡献。刚发现其他答案更适合我的情况！ –

jquery函数每个间隔的延迟时间缩短

回答

相关问题