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>