jQuery: come sfumare tra le classi?

Devo essere in grado di sfumare tra le classi e passare senza interruzioni tutti gli stili applicati all'elemento e ai suoi figli. Come si può fare usando jQuery? So come aggiungere/rimuovere classi, ma non è la stessa cosa di una bella transizione tra due colori drasticamente diversi.jQuery: come sfumare tra le classi?

fonte

2012-01-20 Andrew

Eventuali duplicati: http://stackoverflow.com/questions/2176413 –

È possibile farlo con il plugin Transition (IIRC) di jQuery UI, ma non mi piace raccomandare l'interfaccia utente di jQuery, ma quella è persona al preferenza. – Bojangles

Deve essere fatto con jQuery? I browser più recenti (tranne, ovviamente, IE, ad eccezione forse della versione successiva, IE10) supportano le transizioni CSS in una certa misura se si usano le loro regole di stile proprietarie. O è questo il problema? – JayC

jQuery UI ha una funzione toggleClass che ha un argomento per la durata:

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

Per esempio, io fare questo su uno dei miei siti (fade in/out della classe light e fade/in out la classe dark):

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

fonte

2012-01-20 00:37:25 Matt

che sembra estremamente promettente. dovrò verificarlo. Grazie! – Andrew

poiché la tua risposta raggiunge tecnicamente quello che stavo chiedendo, ti sto dando il merito, ma la mia esperienza con le animazioni di classe UI jQuery è stata orribile. Ho finito per hackerare qualcosa che implicava livelli di dissolvenza in/out posizionati dietro il contenuto. – Andrew

In tal caso, potrebbe esserci un modo più efficace per strutturare il layout. A volte devo ripetere i miei piani una mezza dozzina di volte prima che inizi a essere funzionalmente sano di mente. :) – Matt

Partenza il plugin colore per jQuery: https://github.com/jquery/jquery-color

fonte

2012-01-20 00:37:15 Tom

Prova fadeIn.

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

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

Anche se a seconda della complessità potrebbe essere necessario jQuery UI come altri hanno detto.

fonte

2012-01-20 00:38:36

Ciò svanirà negli elementi, non nella classe applicata agli elementi. – Matt

Vero, questa funzionalità dovrebbe essere in jQuery core imo. –

È questo che stai cercando di realizzare? 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; 
}

fonte

2012-01-20 00:48:00 RandomWebGuy

questo è fondamentalmente quello che ho finito per fare – Andrew

jQuery: come sfumare tra le classi?

risposta

Problemi correlati