jQuery UI show using slide animation jumps to full

问题:

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"

回答1:

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

回答2:

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