jQuery UI显示使用幻灯片动画在动画开始前跳到全高

Question

我正在尝试创建一个简单的消息，它可以滑入并在滑入时"优雅地"向下滑动下面的内容。我遇到的问题是消息下面的内容没有优雅地滑动，它甚至在动画开始之前就"跳"到了消息的整个高度。当消息被隐藏时也是如此——消息向上滑动，但高度保持不变，直到动画完成，然后内容弹回原位。

超级简化的JSFiddle：http://jsfiddle.net/U94qD/2/

代码（在JSFiddle关闭的情况下）：

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

注意：我尝试过使用"slideDown"one_answers"slideUp"方法，但动画的功能不同。不是向下滑动内容，而是调整div的高度以显示内容，这就是我所说的"盲"动画，而不是"滑动"

Answer 1

除了在后台修改jQuery UI之外，我能看到的唯一解决方案是使用额外的容器"手动"构建动画。我在这里创建了一个示例（http://jsfiddle.net/U94qD/6/），其中右边的第三个集合设置了我在第一个示例中预期的动画

Answer 2

试试这个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>

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