0

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

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

4

2 回答 2

0

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

于 2012-04-04T16:35:11.187 回答
0

试试这个 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);
});
}
于 2014-01-17T09:20:27.807 回答