JQuery淡入淡出循環和延遲

Question

我有2個div堆疊在一起。

我需要一個非常簡單的函數，將：

一）等待3秒鐘，然後 B）淡出頂部事業部透露第二個div C）等待再次3秒鐘，然後 d）淡入再次頂級Div e）再次環回

任何人都可以提供任何建議嗎？

非常感謝

Answer 1

這是一個嘗試。

function foo() { 
    jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000}) 
     .animate({opacity: 0}, {duration: 3000}) 
     .animate({opacity: 0}, {duration: 3000}) 
     .animate({opacity: 1.0}, {duration: 3000, complete: foo}) 
} 

注意：要暫停，只需調用具有相同目標值的屬性的動畫就像現在一樣。最後一個動畫調用與回調相同的函數。

PS：它會隨着時間的推移導致堆棧溢出嗎？

Answer 2

如果兩個div有「ID1」和「ID2」的ID，以及ID2是上一個那麼代碼會是這樣：

function fadeIn() { 
    $("id2").animate({opacity:0},500); 
    setTimeout(fadeOut,3500); 
} 

function fadeOut() { 
    $("id2").animate({opacity:1},500); 
    setTimeout(fadeIn,3500); 
} 

function startAnim() { 
    setTimeout(fadeIn,3000); 
} 

startAnim（）開始動畫週期，你應該打電話給@開始。然後淡入&保持動畫id2和設置超時對方。延遲時間爲3500，因爲您需要3秒的延遲（即3000毫秒），而前一個動畫需要500秒才能完成。這可以通過使用動畫回調來完成，但這更加混亂。

Answer 3

此嘗試使用jquery.com的一個小食譜函數等待。

函數doFading假定頂部div的id爲「a4​​」。

function doFading() { 
     $("#a4").wait(3000) 
     .fadeOut("slow") 
     .wait(3000) 
     .fadeIn("slow",doFading); 
    } 

$.fn.wait = function(time, type) { 
     time = time || 1000; 
     type = type || "fx"; 
     return this.queue(type, function() { 
      var self = this; 
      setTimeout(function() { 
       $(self).dequeue(); 
      }, time); 
     }); 
    }; 

Answer 4

這是你在找什麼（我認爲）。它使用無序列表，但可以將它切換爲div或將div放在列表項中，就像我在下面所做的那樣。

這裏是jQuery的...

$(document).ready(function() { 

    var j = 0; 
    var delay = 2000; //millisecond delay between cycles 
    function cycleThru(){ 
      var jmax = $("ul#cyclelist li").length -1; 
      $("ul#cyclelist li:eq(" + j + ")") 
        .animate({"opacity" : "1"} ,400) 
        .animate({"opacity" : "1"}, delay) 
        .animate({"opacity" : "0"}, 400, function(){ 
          (j == jmax) ? j=0 : j++; 
          cycleThru(); 
        }); 
      }; 

    cycleThru(); 

}); 

...有的開始三網融合

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px} 
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute} 

你已經有你的HTML，但如果你需要一個例子...

<ul id="cyclelist"> 
    <li><div>First Div</div></li> 
    <li><div>Second Div</div></li> 
    <li><div>Third Div</div></li> 
</ul> 

我喜歡邀功這一點，但它從CSS-技巧是直http://css-tricks.com/snippets/jquery/cycle-through-a-list/

Answer 5

如果你還想要它xfade。使用floyed的腳本，但進行我已經使用的更改。唯一的問題是你想要顯示應該是在li元素

$(document).ready(function() { 

     var j = 0; 
     var delay = 5000; //millisecond delay between cycles 
     function cycleThru(){ 
       var jmax = $("ul#cyclelist li").length -1; 
       $("ul#cyclelist li:eq(" + j + ")") 
         .animate({"opacity" : "1"} ,1000) 
         .animate({"opacity" : "1"}, delay); 
      $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);  
      $("ul#cyclelist li:eq(" + j + ")") 
         .animate({"opacity" : "0"}, 1000, function(){ 
           (j == jmax) ? j=0 : j--; 
           cycleThru(); 
         }); 
       }; 

     cycleThru(); 

}); 

Answer 6

我知道這是舊的，第二個你的第一個形象，但我想我會分享我做了什麼做到這一點

$(document).ready(function() { 
    var delay = 500; 
    $("#mydiv").bind('fadein', function() 
    { 
     $(this).fadeOut(1000, function() 
     { 
      $(this).delay(delay).trigger('fadeout'); 
     }); 
    }); 

    $("#mydiv").bind('fadeout', function() 
    { 
     $(this).fadeIn(1000, function() 
     { 
      $(this).delay(delay).trigger('fadein'); 
     }); 
    }); 

    $("#mydiv").fadeIn(1000, function() 
    { 
     $(this).trigger("fadein"); 
    }); 
}); 

然後打電話時您希望它停止

$("#mydiv").stop().hide(); 

Answer 7

沒有人可以永遠看到這一點，但以防萬一...

<script> 
$(document).ready(function() { 
     $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000); 
     $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000); 
}); 
</script> 

這是毫無雖然循環吧....

這將是

<script> 
$(document).ready(function() { 
    function animate(){ 
     $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000); 
     $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);  
    } 
    animate(); 
    setInterval(animate, 10000); 
}); 
</script>