CODEWITHSUNDEEP
jqueryslidetoggle
user2585299
user2585299

Reputation: 883

Jquery slideToggle effect not smooth

<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.

Upvotes: 11

Views: 27742

Answers (5)

zafer onay
zafer onay

Reputation: 1791

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.

Upvotes: 0

Ivan Town
Ivan Town

Reputation: 465

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)

Upvotes: 7

donlaur
donlaur

Reputation: 1287

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

Upvotes: 9

TJ15
TJ15

Reputation: 363

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.

Upvotes: 8

Tomer Almog
Tomer Almog

Reputation: 3868

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.

Upvotes: 4

Related Questions