jQuery: कक्षाओं के बीच कैसे फीका है?

Question

मुझे कक्षाओं के बीच फीका और तत्व और उसके बच्चों पर लागू होने वाली किसी भी और सभी शैलियों को निर्बाध रूप से संक्रमण करने में सक्षम होना चाहिए। JQuery का उपयोग करके यह कैसे किया जा सकता है? मुझे पता है कि कक्षाओं को कैसे जोड़ना/निकालना है, लेकिन यह दो भारी रूप से अलग-अलग रंगों के बीच एक अच्छा संक्रमण के समान नहीं है।

Answer 1

jQuery यूआई एक 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

फीडइन आज़माएं।

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

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

हालांकि जटिलता आप jQuery यूआई आवश्यकता हो सकती है के रूप में अन्य का उल्लेख किया है पर निर्भर करता है।

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

सीएसएस:

#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; 
}