使用幻灯片动画的jQuery UI展示在动画开始之前跳至最高高度 [英] jQuery UI show using slide animation jumps to full height before animation starts

问题描述

我正在尝试创建一个简单的消息，将其滑入并优雅地"将其下方的内容向下滑动，同时将其滑入.我遇到的问题是，消息下方的内容没有优雅地滑动，它是甚至在动画开始之前就跳到"消息的全部高度.隐藏消息时也是如此-消息向上滑动，但高度保持不变，直到动画完成，然后内容又弹出到位.

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.

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

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

代码(以防JSFiddle关闭):

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

注意:我尝试改用"slideDown"和"slideUp"方法，但是动画的功能不同.而不是向下滑动内容，而是调整div的高度以显示内容，这就是我所说的盲"动画，而不是幻灯片"

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"

推荐答案

除了在后台修改jQuery UI之外，我能看到的唯一解决方案是使用其他容器手动"构建动画.我在这里创建了示例(

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

这篇关于使用幻灯片动画的jQuery UI展示在动画开始之前跳至最高高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！