jQuery si anima tra due diverse classi CSS?

Question

Sto cercando di capire come funzionano le animazioni jQuery.

Per esempio, se ho un elemento a con i CSS che lo fa apparire come un'immagine cliccabile e un dato with e height nei CSS, come potrei tranquillamente animare la width e height di questo elemento?

Devo animare i valori nella classe CSS? O devo impostare una nuova classe CSS con i valori obiettivo per width e height e lasciare jQuery animato da oldClass a newClass?

Oppure posso semplicemente utilizzare i metodi .width() e .height() di jQuery, indipendentemente da quali valori sono specificati in CSS?

Ciò che mi confonde è: se modifico la larghezza di un elemento con jQuery, questo modifica anche il mio CSS, o jQuery/JavaScript semplicemente sovrascrive i valori specificati in CSS con qualcos'altro? Voglio dire: dopo aver usato jQuery per modificare la larghezza, questa larghezza diventa anche il nuovo valore nel file CSS? Posso applicare questa classe ad altri elementi e avranno la nuova larghezza?

Answer 1

Si sovrapporrà allo stile in linea.

Mostrerò ora una versione con la parte superiore, a sinistra in animazione ma è possibile applicarla su quasi tutte le proprietà CSS.

HTML

<span id="test">blablabla</span> 

CSS

span{ 
    position:absolute; 
    display:block; 
    height:50px; 
    width:50px; 
} 

jquery

$('#test').animate({top:'100px',left:'50px'}, 500); 

fiddle

Answer 2

jQuery animate anima solo valori numerici di css. Non si animerà tra le classi (vedi esempio sotto per come farlo). La funzione .animate() aggiunge il css che tu gli dai come parametro e lo aggiunge come css in linea. Sostituirà sempre il tuo foglio di stile css. Questo va bene, ma è un po 'disordinato e può andare fuori controllo molto facilmente.

Tuttavia, se si desidera animare tra le classi, è meglio per prestazioni e più pulito utilizzare la proprietà di transizione css3. Vedi l'esempio:

HTML

<div class="myTestAnimation">Something to test</div> 

JQuery (potrebbe usare la vaniglia JavaScript per questo). Basta alternare le lezioni. In questo modo non hai alcuna informazione sullo stile nel tuo css.

jQuery(document).ready(function($) { 
    $(".myTestAnimation").click(function() { 
     $(this).toggleClass("animate"); 
    }); 
}); 

CSS (questa anima la larghezza e l'altezza e il colore di sfondo) .animate() non sarà animato colore di sfondo in modo che è un ulteriore bonus.

.myTestAnimation { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    position: relative; 
} 
.myTestAnimation.animate { 
    background-color: blue; 
    width: 200px; 
    height: 200px; 
} 

Answer 3

So che è passato molto tempo, ma può comunque aiutare qualcuno a cercare la risposta.Affidarsi alla proprietà di transizione CSS3 può creare problemi quando si desidera supportare i browser più vecchi.

Il comportamento richiesto di animazione tra due stati (classi CSS) può essere completamente realizzato utilizzando jQuery UI, che supporta questo estendendo il metodo switchClass(). Supporta inoltre tutti i vantaggi del metodo animate(), come la durata, facilitando, callback, ecc

Come afferma documentazione ufficiale: '

simile a transizioni CSS nativi, di jQuery UI animazioni di classe fornisce una transizione graduale da uno stato all'altro consentendo allo di mantenere tutti i dettagli su quali stili modificare in CSS e dal tuo JavaScript.

È possibile leggere tutto su di esso here.

jQuery UI può anche essere compilato per includere solo le cose che ti servono, in modo da poter ridurre le dimensioni della libreria escludendo le funzionalità che non verranno utilizzate. Verifica le opzioni disponibili here.

Spero che abbia aiutato qualcuno!