使用幻灯片动画的jQuery UI show在动画开始前跳转到完整高度

我正在尝试创建一个简单的消息，该幻灯片可以滑入并“优雅地”将其下方的内容滑入其中。我遇到的问题是消息下方的内容没有优雅地滑动，而是“跳跃”在动画开始之前到消息的完整高度。 消息被隐藏时也是如此 – 消息向上滑动，但高度保持不变，直到动画完成，然后内容弹回到位。

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

代码（如果JSFiddle关闭）：

HTML：

Sliding Something into place
 
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. 

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”和“slideUp”方法，但动画的function不同。 而不是向下滑动内容，调整div的高度以显示内容，这就是我所谓的“盲”动画，而不是“幻灯片”

Answer 1

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

Answer 2

试试这个HTML：

 
Sliding Something into place
 
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. 

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