javascript - fadeToggle 似乎让隐藏的 div 跳起来

Question

您好，我有两个 div 使用计时器淡入淡出，如下所示

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

示例小提琴

---

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

setInterval(ToggleDiv, 5000);

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

示例小提琴

Answer 2

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

    });

}

Answer 3

只使用动画

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

Answer 4

尝试这个

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

演示

或者

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

演示