jQuery : 클래스 간 페이드 (fade) 방법은 무엇입니까?

Question

클래스간에 페이드하고 요소와 그 자식에 적용되는 모든 스타일을 자연스럽게 전환 할 수 있어야합니다. 어떻게 jQuery를 사용하여이 작업을 수행 할 수 있습니까? 클래스를 추가/제거하는 방법을 알고 있지만 완전히 다른 두 색상 사이의 멋진 전환과는 다릅니다.

Answer 1

jQuery를 UI는 기간 동안 인수가있는 toggleClass 기능이 있습니다 예를 들어

http://jqueryui.com/demos/toggleClass/

를 내 사이트 중 하나에 이렇게 (/ 아웃 light 클래스를 페이드와 dark 클래스에서/페이드) :

$('body').toggleClass('light', 250).toggleClass('dark', 250); 

Answer 2

체크 아웃 jQuery를위한 컬러 플러그인 : https://github.com/jquery/jquery-color

Answer 3

fadeIn을 시도하십시오.

http://api.jquery.com/fadeIn/

$(".myClass").fadeIn("slow"); 

비록 다른 언급이 당신이 jQuery를 UI를해야 할 수도 복잡성에 따라.

Answer 4

달성하려는 목표입니까? Here's the jsFiddle

HTML :

<input type="button" id="toggle" value="toggle" /> 
<br /> 
<div id="classContainer"> 

    <div id = "class1"> 

    </div> 
    <div id = "class2"> 
    </div> 
</div> 

jQuery를 :

$("#toggle").click(function(){ 
    if ($("#class1").is(":visible")) { 
     $("#class1").fadeOut(); 
     $("#class2").fadeIn(); 
    } 
    else { 
     $("#class1").fadeIn(); 
     $("#class2").fadeOut(); 
    } 
}); 

CSS :

#classContainer 
{ 
    position: relative; 
} 

#class1, #class2 
{ 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#class1 
{ 
    background-color: red; 
    display: none; 
} 

#class2 
{ 
    background-color: blue; 
}