jQuery: làm thế nào để mờ dần giữa các lớp học?

Question

Tôi cần để có thể mờ dần giữa các lớp và chuyển tiếp liền mạch bất kỳ và tất cả các kiểu được áp dụng cho phần tử và các phần tử của nó. Làm thế nào điều này có thể được thực hiện bằng cách sử dụng jQuery? Tôi biết cách thêm/xóa các lớp nhưng điều đó không giống như một sự chuyển tiếp đẹp giữa hai màu sắc khác nhau đáng kể.

Answer 1

jQuery UI có một chức năng toggleClass rằng có một cuộc tranh cãi cho thời gian:

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

Ví dụ, tôi làm điều này trên một trang web của tôi (fade in/out the light class and fade/in out the dark class):

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

Answer 2

Kiểm tra các plugin màu cho jQuery: https://github.com/jquery/jquery-color

Answer 3

Thử fadeIn.

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

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

Mặc dù phụ thuộc vào mức độ phức tạp bạn có thể cần jQuery UI như khác đã đề cập.

Answer 4

Đây có phải là những gì bạn đang cố gắng hoàn thành không? 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; 
}