Question

你好我有两个div，fadeToggle带有一个计时器，如下所示

<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>

使其切换的Javascript

$(document).ready(function(){
    setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
    $('#div1').fadeToggle("slow");
    $('#div2').fadeToggle("slow");
}

这是小提琴链接http://jsfiddle.net/BnYat/

我的问题是第二个div在第一个div完成切换之前显示，然后跳转到顶部。

如果有办法在没有跳跃效果的情况下创建从一个div到下一个div的平滑过渡？

Answer 1

一个简单的解决方案是将两个div元素放在一个容器中，并绝对定位它们：

<div id="container">
    <div id="div1">Hello</div>
    <div id="div2" style="display:none;">World</div>
</div>

#container div {
    position: absolute;
}

Example fiddle

或者，您可以完全淡出一个然后淡出回调中的下一个：

setInterval(ToggleDiv, 5000);

function ToggleDiv(){
    $('#div1').fadeToggle("slow", function() {
        $('#div2').fadeToggle("slow");
    });
}

Example fiddle

Answer 2

$(document).ready(function(){
    setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
    $('#div1').fadeToggle("slow", function(){
        $('#div2').fadeToggle("slow");           

    });

}

Answer 3

试试这个

 setInterval(ToggleDiv, 5000);

 function ToggleDiv() {
     var div = "#" + $('div:visible').attr('id');
     var div2 = "#" + $('div:not(:visible)').attr('id');
     $(div).fadeToggle("slow", function () {
         $(div2).fadeToggle("slow");
     });
 }

DEMO

或

function ToggleDiv() {
    if ($('#div1').is(':visible')) {
        $('#div1').fadeToggle("slow", function () {
            $('#div2').fadeToggle("slow");
        });
    } else {
        $('#div2').fadeToggle("slow", function () {
            $('#div1').fadeToggle("slow");
        });
    }
}

DEMO

Answer 4

只需使用动画

$( "#div1" ).animate({
    visibility:hidden
  }, 5000, function() {
    // Animation complete.
  });
$( "#div2" ).animate({
    visibility:visible
  }, 5000, function() {
    // Animation complete.
  });

fadeToggle似乎让隐藏的div跳起来

4 个答案: