jQuery UI replaceWith() animation?

Question

그래서 사업부가 :

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

을 그리고 다른 사업부가 :

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

가 어떻게 처음 DIV 원활 두 번째로 대체되는 애니메이션을 만들 수 있습니까? fadeIn/fadeOut을 수행하면 두 번째 div는 첫 번째 div가 사라진 후에 만 ​​발생하기 시작합니다.

Answer 1

예. 꽤 쉬운. #lol이 보이고 #happy가 아닌 것으로 가정합니다. jQuery의 표시/숨기기를 사용하여이를 설정할 수 있습니다.

$('#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에 모두 클래스를 추가 할 수 있습니다. n 클래스를 토글합니다. 이렇게하면 둘 다 동시에 전환 할 수 있습니다 (다른 하나가 페이드 아웃하는 동시에 하나가 페이드 인 됨). 당신은 절대 위치를 사용하는 경우 작동 페이드 아웃/fadeIn를 사용

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

. 뿐만 아니라 다른 많은 옵션이 있습니다.

I 해요 전혀 당신이 당신의 최종 결과에서보고 싶지만, 여기에 몇 가지 예입니다 무엇인지 :

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