jQuery UI replaceWith（）動畫？

Question

所以我有一個div：

<div id="lol"> 
Some random text! 
</div> 

而且我有其他分區：

<div id="happy"> 
lol 
</div> 

怎麼可能讓一個動畫，其中第一個div順利通過第二個取代？如果做一個淡入/淡出，第二個div只會在第一個div消失後開始發生。

Answer 1

是的。很容易。假設＃lol可見並且#happy不可見。 （你可以使用jQuery的show/hide來設置它）。

$('#lol').fadeOut(function() { 
    $('#happy').fadeIn(); 
}); 

Answer 2

$("#lol").fadeOut(1000,function(){ 

$("#happy").fadeIn(); 
}); 

Answer 3

我覺得只是這會工作。

$("#happy").hide(); 

$("#smooth").click(function(){ 

    $("#happy").show();//no transition for this 
    $("#lol").slideUp();//with transition 


}); 

這裏是一個demo fiddle

或者你甚至可以切換像this

Answer 4

的效果，我認爲這是你想要什麼：

$("button").click(function() { 
$(".happy").toggle('slow'); 
}); 

JSFIDDLE

Answer 5

你可以爲這兩個div添加一個類ñ切換課程。這將允許兩個同時切換（一個同時淡入另一個淡出）。

HTML

<div id="lol" class="toggle"> 
Some random text! 
</div> 
<div id="happy" class="toggle"> 
lol 
</div> 
<button id="btn">Replace</button> 

JQuery的

$("#happy").hide(); 

$("#btn").click(function() { 
    $(".toggle").toggle(2000); 
}); 

JSFiddle

Answer 6

使用淡出/淡入如果您使用絕對定位將工作。還有很多其他選項。

我不能肯定你會喜歡什麼在你的最終結果看，但這裏有幾個例子：

Example fiddle

CSS：

div.container { 
    position: relative; 
    height: 30px; 
} 
div.container div { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

HTML：

<div class="container"> 
    <div id="lol">Some random text!</div> 
    <div id="happy" style="display: none">lol</div> 
</div> 
<div class="container"> 
    <div id="lol1">Some random text!</div> 
    <div id="happy1" style="display: none">lol</div> 
</div> 
<div class="container"> 
    <div id="lol2">Some random text!</div> 
    <div id="happy2" style="left: -200px">lol</div> 
</div> 
<div class="container"> 
    <div id="lol3">Some random text!</div> 
    <div id="happy3" style="left: 200px; opacity: 0;">lol</div> 
</div> 

示例代碼：

$('#lol').fadeOut(1000); 
$('#happy').fadeIn(1000); 


$('#lol1').slideUp(1000); 
$('#happy1').slideDown(1000); 

$('#lol2').animate({left: -200}); 
$('#happy2').animate({left: 0}); 


$('#lol3').animate({left: -200}, 1000); 
$('#happy3').animate({left: 0, opacity: 1}, 1500);