javascript - fadeToggle は非表示の div をジャンプアップさせるようです

Question

こんにちは、次のようにタイマーでフェードトグルする2つの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 がトグルされる前に 2 番目の div が表示され、トップにジャンプすることです。

ジャンプ効果が発生することなく、ある div から次の div へのスムーズな移行を作成する方法があれば?

Answer 1

簡単な解決策は、両方のdiv要素を 1 つのコンテナーに入れ、絶対に配置することです。

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

#container div {
    position: absolute;
}

フィドルの例

---

または、1 つを完全にフェードアウトしてから、コールバックで次のフェードインを行うこともできます。

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

これを試して

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

デモ

Answer 4

アニメーションを使用するだけです

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