Jquery slideToggle effect not smooth

Question

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

I am trying to call $("div.searchDiv").slideToggle("slow"); on div with class searchDiv which is hidden initially using display:none. There are again some div elements inside those 4 div's with class row. Does it matter how the elements are placed inside the main div searchDiv because I see that the the toggle effect is not smooth for the elements placed inside the main div.

Answer 1

The idea if something looks smooth or not is an opinion and different based on who is looking at it. If you are using slow it is a given it a value of 200 milliseconds.

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

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

The default easing is swing and to me, it looks rough. I would suggest trying linear for the easing.

If the swing or linear isn't smooth enough for you, you can use and include jQuery UI and use one of the other options. You can find the easing that you think works as smooth as you need.
http://jqueryui.com/resources/demos/effect/easing.html

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