jQuery UI replaceWith（）動畫？

所以我有一個div：jQuery UI replaceWith（）動畫？

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

而且我有其他分區：

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

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

來源

2013-09-05 John Black

要做到這一點，他們都必須在同一時間可見，並使兩個元素同時坐在同一位置，他們將需要絕對定位。在這一點上，你可以褪色他們倆。隱藏的將顯示並顯示將隱藏。 –

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

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

來源

2013-09-05 17:34:59

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

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

來源

2013-09-05 17:35:42

這仍然需要一個完全淡出之前，第二個淡入，這顯然是他想避免的事情。 –

我覺得只是這會工作。

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

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

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


});

這裏是一個demo fiddle

或者你甚至可以切換像this

來源

2013-09-05 17:38:59 mithunsatheesh

請閱讀我的問題，那是不光滑的，第一個元素首先消失，然後第二個元素出現。 –

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

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

JSFIDDLE

來源

2013-09-05 17:39:25

你可以爲這兩個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

來源

2013-09-05 17:50:30 Tricky12

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

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

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

來源

2013-09-05 17:56:10 dc5

jQuery UI replaceWith（）動畫？

回答

相關問題