Efekt Jquery slideToggle nie jest płynny - jquery, slidetoggle

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

Próbuję zadzwonić $("div.searchDiv").slideToggle("slow"); na div z klasą searchDiv który jest początkowo ukryty display:none. Znów jest kilka elementów div wewnątrz tych 4 div z klasą row. Czy ma to znaczenie, jak elementy są umieszczone w głównym div searchDiv ponieważ widzę, że efekt przełączania nie jest płynny dla elementów umieszczonych w głównym div.

Odpowiedzi:

Pomysł, czy coś wygląda gładko, czy nie, to opinia i inna zależność od tego, kto na nią patrzy. Jeśli używasz slow, jest to wartość 200 milisekund.

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

Czas trwania podano w milisekundach; wyższywartości wskazują wolniejsze animacje, a nie szybsze. Ciągi „szybki” i „powolny” mogą być dostarczone, aby wskazać czasy trwania odpowiednio 200 i 600 milisekund.

Domyślnym ustawieniem jest huśtawka, a dla mnie wygląda to szorstko. Sugerowałbym wypróbowanie liniowego dla złagodzenia.

Jeśli huśtawka lub liniowy nie są wystarczająco płynne, możesz użyć i dołączyć interfejs jQuery i użyć jednej z pozostałych opcji. Łatwość, z jaką uważasz, że działa, jest tak gładka, jak potrzebujesz.
http://jqueryui.com/resources/demos/effect/easing.html

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

Musisz dodać szerokość do swoich wierszy.

jQuery nie zna wymiarów twojego ukrytegodiv, dopóki nie zostanie wyświetlony. Tak więc, gdy zostanie kliknięty, faktycznie wyciąga go z pozycji, aby zmierzyć go, zanim szybko go zastąpi. To często ma efekt uboczny powodując pewne podniecenie. Ustawienie szerokości elementu zapobiega wyciągnięciu jQuery z pozycji.

Wiem, że to jest stare, ale w przypadku, gdy pomaga komuś innemu, znalazłem problem, gdy ustawiłem właściwość min-height na przełączanym elemencie, ustawienie na stałą wysokość rozwiązało to dla mnie.

Miałem podobny problem. Dwie rzeczy naprawiły to dla mnie.

1. Musiałem usunąć istniejące css przejścia na moim elemencie.
2. W moim „pasku klikania” (h2) znajdował się element, który potrzebował marginesu ustawionego na 0. (powodował animację innych elementów do niewłaściwej granicy - powodując dziwny snap na końcu)