Javascript/jquery多元素不透明動畫

我想創建一個基於div內圖像的動畫。我想要三分之一的圖像出現，然後消失，然後出現另外三分之一的圖像等。因此，我將圖像分爲3個不同的類別。Javascript/jquery多元素不透明動畫

我已經研究了一點關於它的發現，最好的辦法是動畫不透明度，如本文http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

問題是，當我運行我的代碼，所有的動畫一次運行中所看到的，和圖像不會留在屏幕上很長時間。任何幫助正確的方向將不勝感激。

$(document).ready(function() { 
     $(".hardware > img").css("opacity", "0"); 
     setInterval(function() { 
      $('.show1').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show1').animate({opacity:0}, 1000) 
     }, 1000); 
     setInterval(function() { 
      $('.show2').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show2').animate({opacity:0}, 1000) 
     }, 1000); 
     setInterval(function() { 
      $('.show3').animate({opacity:1}, 1000) 
     }, 4000); 
     setInterval(function() { 
      $('.show3').animate({opacity:0}, 1000) 
     }, 1000); 
    });

編輯：一些輸入我想出了一些代碼工作的，儘管它結束了一個小隨機和不準確後：

$(document).ready(function() { 
     $(".hardware > img").css("opacity", "0"); 
     setInterval(function() { 
      $('.show1').animate({opacity:1}, 1000).delay(18000); 
      $('.show1').delay(6000).animate({opacity:0}, 1000).delay(12000); 
      $('.show2').delay(7000).animate({opacity:1}, 1000).delay(11000); 
      $('.show2').delay(12000).animate({opacity:0}, 1000).delay(6000); 
      $('.show3').delay(13000).animate({opacity:1}, 1000).delay(5000); 
      $('.show3').delay(18000).animate({opacity:0}, 1000); 
     }, 0); 
    });

來源

2014-10-02 Tomás Antunes

而不是使用'setInterval'可以傳遞函數的動畫將動畫完成'$ .animate後運行（{不透明度：0}，1000，函數（）{//其他動畫}）' – 2014-10-02 11:46:09

對不起，那對我來說真的沒用。檢查編輯。 – 2014-10-02 12:03:21

你可以試試這個。我相信你想

$(function(){ 

    $('.hardware img').hide().each(function(){ 

     // Get the number from the img class. For show1 will be 1, for show2 will be 2 etc. 

     var multiplier = $(this).prop('class').replace(/^\D+/g, ''); 

     // Use multiplier in delay. For show1 element will be 1000, for show 2 eill be 2000 etc. 

     $(this).delay(multiplier * 1000).fadeIn().fadeOut(); 
    }); 

});

它的什麼你也可以設置你的圖像CSS來img {display:none;}避免隱藏它們與jQuery。

來源

2014-10-02 12:20:12 tliokos

它看起來像一些優秀的代碼，但它不完全是我所需要的。我選擇不使用淡入和顯示，因爲它會改變圖像網格的佈局。除此之外，我需要它成爲一個循環，我需要圖像在屏幕上停留5秒鐘，然後才能淡出。 – 2014-10-02 13:19:14

無論如何，我設法使用您向我展示的延遲方法做出了我想要的東西。它沒有出來非常精確，但它現在會做。 – 2014-10-02 14:01:03

見http://jsfiddle.net/xoc2s5x7/

你需要根據自己的風格來調整的div。你嘗試的代碼的問題是你有圖像上的類，所以一個動畫是改變多個圖像，並且多次觸發回調，所以它看起來是隨機的。您需要將您的圖像放入div中，然後改爲使div生效。只要確保您一次爲單個div製作動畫。

function animateAll() { 
    $(".show1").animate({opacity:1}, 1000, 
    function(){$(".show1").animate({opacity:0}, 1000, 
    function(){ $(".show2").animate({opacity:1}, 1000, 
    function() {$(".show2").animate({opacity:0}, 1000, 
    function(){ $(".show3").animate({opacity:1}, 1000, 
    function(){$(".show3").animate({opacity:0}, 1000, 
    function(){animateAll();});}); });}); });}); 
};

來源

2014-10-03 09:15:17 artm

Javascript/jquery多元素不透明動畫

回答

相關問題