Jquery slideToggle effetto non è liscia

Question

<div class="searchDiv"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

sto provando a chiamare il $("div.searchDiv").slideToggle("slow"); div con classe searchDiv che è nascosto inizialmente utilizzando display:none. Ci sono ancora alcuni elementi div all'interno di quei 4 div con la classe row. È importante il modo in cui gli elementi sono posizionati all'interno del div principale searchDiv perché vedo che l'effetto di commutazione non è omogeneo per gli elementi posizionati all'interno del div principale.

Answer 1

L'idea se qualcosa sembra liscia o no è un'opinione e diversa in base a chi la guarda. Se si utilizza lentamente, è dato un valore di 200 millisecondi.

SlideToggle. https://api.jquery.com/slideToggle/

Le durate sono espresse in millisecondi; valori più alti indicano animazioni più lente, non più veloci. Le stringhe 'fast' e 'slow' possono essere fornite per indicare durate di 200 e 600 millisecondi, rispettivamente.

L'attenuazione di default è altalena e per me, sembra ruvida. Suggerirei di provare lineare per l'andamento.

Se lo swing o la linear non è abbastanza regolare per te, puoi utilizzare e includere l'interfaccia utente di jQuery e utilizzare una delle altre opzioni. È possibile trovare l'andamento che si ritiene funzioni nel modo più semplice possibile.
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function() { 
    // actions to do when animation finish 
}); 

Answer 2

è necessario aggiungere larghezza per le righe.

jQuery non conosce le dimensioni del div nascosto finché non viene visualizzato. Quindi, quando viene cliccato, in realtà lo tira fuori posizione per misurarlo prima di sostituirlo rapidamente. Questo ha spesso l'effetto collaterale di causare un po 'di nervosismo. L'impostazione della larghezza sull'elemento impedisce a jQuery di tirarlo fuori posizione.

Answer 3

So che questo è vecchio ma nel caso in cui aiuti qualcun altro, ho trovato un problema quando ho impostato una proprietà di altezza minima sull'elemento attivato, impostando su un'altezza fissa risolto per me.

Answer 4

Ho avuto un problema simile. Due cose l'hanno risolto per me.

1. Avevo bisogno di rimuovere i css di transizione esistenti sul mio elemento.
2. ho avuto un elemento all'interno del mio "bar click" (H2) che aveva bisogno di margine stabilito a 0. (che stava facendo altri elementi animano al confine sbagliato - provocando uno strano scatto alla fine)