jQuery slideDown Snap Back Issue

I have the same problem that I am reading about all over the web, although I can't find the solution.

Simply put, when using the slideDown() method on my DIV elements, I get that ugly snap back effect where jQuery slides the DIV size down too far and then it snaps back to the actual size in an ugly way.

Looking over the web, iv tried removing all margins and padding from the offending elements, but it does nothing.

I cant set static sizes for the div's because each one will change on page load. One loaded though they wont change. (new divs are also created using ajax)

Heres a sample DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

and the CSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

Can anyone help me here? Im out of ideas .. Iv tried using jQuery to figure out the height of the DIV first then force the height using CSS() before calling the slideDown() but jQuery was almost always wrong about the height ...

The response div is also hidden using the display:none property.

This function is then being called on it

function quickResponse(time, user, message, epoch) {
    $('.latestStar').remove();
    addResponse(time, user, message, epoch);
        $('.new').slideDown(500).removeClass('hidden');
    $('html, body').animate({ scrollTop: '0px'}, 1000, function() {
    });     
}

Edit I forgot to mention, that if the div only contains 1 word, the snap back effect doesnt happen .. but if I type multiple words with spaces, it happens..

Its almost like adding spaces causes the height to screw up.

Have a look on fixes:
1. SlideDown Animation Jump Revisited
2. Fixing jQuery's slideDown() jump effect

Also that same glitch documented (with fix) on jQuery website: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

And try to add following code before your code (on document onload):

$('.new').css('height', $('.new').height());
$('.new').hide();

This way you will set height explicitly, and be sure to display your div initially, the above code will hide it later, because I think it will fail to set right height to hidden div, though you can try. Good Luck~

I was having the snap-back-on-slide-down problem on an LI item I was adding to a UL. There was nothing fancy about it so I was finding it puzzling (and had seen this before, but didn't remember how I'd fixed it then).

In my case, the only fix I needed was do specify a width on my LI and was able to slideDown() and slideUp() smoothly.

e.g.

ul li { width: 100%; }

I got this tip from one of the links posted by @arman-p (which suggests adding a width to the element can fix this problem, which it did in my case).

Add css overflow: hidden to the element you want to slide down.

For some reason this fixed my snap-back problem.

EDIT: Things that confuse jquery about the height of an element will cause the snap-back issue.

Padding will cause it. Put your padded content you want to slide down in a new parent div without padding, and instead slide that parent div down.
Inline text that wraps due to width will cause it. Add white-space: pre or white-space: nowrap to solve it.

I was also getting that ugly snap back effect.

What fixed the snap back issue for me was to apply a css width to the div you are applying the slide function to.

Any of the solutions above didn't work for. I fixed the problem by adding the following styles to my container:

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}

Another thing that could cause this is if you have a "transition" style on the element itself.

An example of what was happening to me

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}

Adding the CSS clear: both solved the problem for me, no idea why though.

Edit: Adding overflow: hidden gave me a blank container with the unwanted additional height.

I have a database loading images that are all set to the same width but some of them have different heights and was having a problem with this. What fixed it for me was just throwing a setTimeout around the slideDown portion of my code.

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);

来源：https://stackoverflow.com/questions/5943994/jquery-slidedown-snap-back-issue

标签

jquery

slidedown