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.

Doorstep

Can you post a complete code example? And whenever possible, include a jsFiddle.net example. – Mourner

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
});

Mechanism

The child elements placed inside the division with class="row" had margin-left properties and were positioned absolutely. I changed their positioning to relative and the toggle effect is smooth now. Though the css of chile elements should not affect the toggle behavior. – Doorstep

Answer 2

I know this is old but in case it helps anyone else, I found an issue when i set a min-height property on the toggled element, setting to a fixed height resolved this for me.

Lux

that saved me :) Thanks a ton – Airboat

For me, it was the height property – Creatural

Answer 3

I had a similar problem. Two things fixed it for me.

1. I needed to remove existing transition css on my element.
2. I had an element inside my "clicking bar" (h2) that needed margin set to 0. (it was making other elements animate to the wrong boundary - causing a strange snap at the end)

Collusion

Removing the CSS transition fixed it for me! Thanks. – Constant

Same here. Removing the existing transition worked perfectly – Foreignism

Answer 4

You need to add Width to your rows.

jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.

Tuckerbag

Answer 5

If you are not comfortable with defining fixed height, feel free to use height: max-content; trick on .searchDiv. So the parent element covers all the children without causing any overflow issue.

Quinsy