4

我有 2 个 div 堆叠在一起。

我需要一个非常简单的功能，它将：

a) 等待 3 秒然后 b) 淡出顶部 Div 以显示第二个 Div c) 再次等待 3 秒然后 d) 再次淡入顶部 Div e) 再次循环

任何人都可以提供任何建议吗？

非常感谢

4

7 回答 7

10

这是一个尝试。

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

注意：要暂停，只需对具有与现在相同目标值的属性调用 animate 即可。最后一个动画调用与回调相同的函数。

PS：随着时间的推移会导致堆栈溢出吗？

于 2009-08-19T18:03:31.347 回答
2

如果两个 div 的 id 为“id1”和“id2”，并且 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() 开始动画循环，你应该调用它 @the start。然后fadeIn & Out 继续为id2 设置动画并为彼此设置超时。延迟为 3500 ，因为您想要 3 秒的延迟（即 3000 毫秒）和 500 以完成上一个动画。这可以使用 animate 上的回调来完成，但这更麻烦。

于 2009-08-19T18:01:09.667 回答
2

这就是你要找的（我认为）。它使用无序列表，但您可以将其切换为 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();

});

...和一些开始的CSS ...

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-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/

于 2011-10-09T17:06:11.613 回答
1

没有人会看到这个，但以防万一……

<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>
于 2012-04-14T07:18:05.397 回答
0

此尝试使用来自 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);
        });
    };
于 2009-08-19T18:24:41.493 回答
0

如果你也想拥有它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();

 });
于 2012-01-25T01:18:58.400 回答
0

我知道这很旧，但我想我会分享我为实现这一目标所做的一切

$(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();
于 2012-02-23T06:02:09.617 回答