jQuery DIV slideDown() Resize Jump

Question

This seems to be similar to the jQuery slideDown Snap Back Issue, however slightly different. You can visit this site and browse through the "Pics" section to see the issue. If you click on an album, the content loads inside the box but, when resized, it thinks it's still the same height, so, it stops at that height. Then, it jumps quickly to the correct height afterward. Any ideas?

var jBody = $("#pics .inner");
var jTitle = $("#pics .title");

$("#pics .album-container a").click( function(e) {

    var strURL = $(this).attr("href");

    var strName = strURL.substr( strURL.indexOf("name=") + 5 );

    jBody.slideUp(100);

    $.get(

        strURL,

        function(strData) {

            jTitle.text("Pictures - " + strName);

            jBody.html(strData).slideDown(1000, "easeOutBounce");

        }

    );

    e.preventDefault();

} );

$("#pics a.back").click( function(e) {

    var strURL = $(this).attr("href");

    jBody.slideUp(100);

    $.get(

        strURL,

        function(strData) {

            jTitle.text("Pictures");

            jBody.html(strData).slideDown(1000, "easeOutBounce");

        }

    );

    e.preventDefault();

} );

perhaps the images are not loaded at the time the animation is called and so it doesn't know to what size to stretch the box and only after the pictures are loaded the div stretches... — Nachshon Schwartz, Dec 11 '11 at 12:38
Can you post the code you are using so that we can see what's going on. Also for the love of god don't autoplay music. — Dormouse, Dec 11 '11 at 12:55
It's a band's website... I understand the disdain for autoplaying music but in this case, I believe it's warranted. Anyway, the code is in the edit. — Gabriel Ryan Nahmias, Dec 11 '11 at 15:52

score 1 · Answer 1 · edited Dec 11 '11 at 16:41

1

The problem is that jQuery can't calculate the actual height of the container because you don't ever specify a height, and the content inside probably isn't fully loaded when you fire the animation, if you add

div.album-container {
      height:166px;
}
div.picture {
   height: 133px;
}

It will work correctly, if you need it to be more adjustable you could use min-height, or set the height with jQuery after the html is inserted and before is animated.

If you want to test it you could log console.log(jBody.height()) after the html is set, so you can see the actual full height the element is being animated to.

edited Dec 11 '11 at 16:41

helloandre

10,541
8
47
64

answered Dec 11 '11 at 16:39

nicosantangelo

13,216
3
33
47

I took your advice but setting the height for those classes doesn't work. What's odd, though, is even with the heights set on the classes, the console output is in the 200s range, clearly not the appropriate height. Hmmmm. Thank you, though. Do you think `display: inline-block` has anything to do with it? – Gabriel Ryan Nahmias Dec 11 '11 at 17:38
I could set a min-height but it might not always be sufficient. – Gabriel Ryan Nahmias Dec 11 '11 at 17:54
Hm that's weird it works when I set the heights in the console. I don't know if is `display: inline-block` the main problem, but the styles in general. If something else comes to mind I'll be sure to let you know – nicosantangelo Dec 11 '11 at 18:24

score 0 · Answer 2 · answered Dec 11 '11 at 16:04

0

Maybe test something like:

jBody.html(strData).delay(500).slideDown(1000, "easeOutBounce");

Just so see if it is an issue with the animation starting before the image heights are rendered.

answered Dec 11 '11 at 16:04

kontur

4,934
2
36
62

jQuery DIV slideDown() Resize Jump

2 Answers2