fadeToggle似乎使隱藏的div跳起來

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平滑過渡到下一個沒有跳躍效應發生？

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

試試這個

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 3

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

    }); 

} 

Answer 4

只是使用動畫效果

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