jQuery UI show using slide animation jumps to full height before animation starts

Go To StackoverFlow.com

0

I am trying to create a simple message that slides in and "elegantly" slides the content below it down while it slides in. The problem that I'm having is that the content below the message isn't sliding elegantly, it's "jumping" to the full height of the message before the animation has even started. The same is true for when the message gets hidden - the message slides up, but the height stays the same until the animation has completed and then the content pops back into place.

Super simplified JSFiddle: http://jsfiddle.net/U94qD/2/

Code (in case JSFiddle is down):

HTML:

<div class="slide" style="display:none;">Sliding Something into place</div>
<div>This is always shown, but jumps down when the slide animation starts instead of sliding down with the element as it's displayed and it stays in place as the div above hides instead of sliding smoothly with it.</div>

JS:

setTimeout(function() {
    show();
}, 500);

function show() {
    $(".slide").show('slide', {
        direction: 'up'
    }, 1000, function() {
        hide();
    });
}

function hide() {
    setTimeout(function() {
        $(".slide").hide('slide', {
            direction: 'up'
        }, 1000);
    });
}

NOTE: I have tried using the "slideDown" and "slideUp" methods instead, but the animation doesn't function the same. Instead of sliding the content down, the height of the div is adjusted to reveal the content, which is what I would call a "blind" animation, not a "slide"

2012-04-03 22:39
by streetlogics


0

The only solution that I can see other than tinkering with jQuery UI under the hood is to "manually" build the animation using an additional container. I've created an example here ( http://jsfiddle.net/U94qD/6/ ) where the third set on the right animates how I would have expected to do in the first example

2012-04-04 16:35
by streetlogics


0

Try with this HTML:

<div><div class="slide">Sliding Something into place</div></div>
<div>This is always shown, but jumps down when the slide animation starts instead of sliding down with the element as it's displayed and it stays in place as the div above hides instead of sliding smoothly with it.</div>

And this jQuery:

setTimeout(
function() {
show();}, 
500);
var current_height = $(".slide").height();
$(".slide").parent().css("height",current_height);
 $(".slide").hide();
function show() {
$(".slide").show('slide', {
    direction: 'up'
}, 1000, function() {
    hide();
});
}
function hide() {
setTimeout(function() {
    $(".slide").hide('slide', {
        direction: 'up'
    }, 1000);
});
}
2014-01-17 09:20
by Vivek Doshi
Could you try adding an explanation of why this code would work? Usually it's much more informative to give an explanation than to provide the code - Joeytje50 2014-01-27 03:16
when you give display none then the element will be act like just its removed from there so the next div will moved up.so I have covered it in div and give it the height of the display none element before make it hide.so now its doesn't matter with the element it will calculate the height and give to the parent div.so the next div will be always stay below that fixed.

I have tried this code in your jsfiddel and its working perfectly as you wanted to be - Vivek Doshi 2014-01-28 05:02