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函數每個間隔的延遲時間縮短

回答

相關問題