jQuery UI 滑动轻松同级推送

Question

我使用 jQuery UI 的 slide 切换效果来切换 div:

$("#link").click(function(){
    $("#targetDiv").toggle("slide", {direction: "up"}, 1000);
});

幻灯片是唯一具有我想要的动画的效果，本质上是 div 从顶部向下。我不需要 toggleSlide 因为这只会改变元素的高度。

slide 的唯一问题是它会立即将同级推到最终位置: http://jsfiddle.net/XYDyy/2/

那么有没有办法让同级元素随着动画 div 的调整而调整它们的位置？

如有任何建议，我们将不胜感激。

Answer 1

你可以通过在 jQuery 添加的 .ui-effects-wrapper 上执行 slideUp()/slideDown() 来欺骗它元素:

$("#link").click(function() {
    if ($("#div1").is(':visible')) {
        $("#div1").toggle("slide", {direction: "up"}, 1000);
        $("#div1").parent(".ui-effects-wrapper").slideUp(1000);
    } else {
        $("#div1").toggle("slide", {direction: "up"}, 1000);
        $("#div1").parent(".ui-effects-wrapper").hide().slideDown(1000);
    }
});

演示:http://jsfiddle.net/jtbowden/LARkS/

否则，您可以添加自己的包装器，并在其上执行 slideUp，并将 #div1 的位置设置为 bottom: 0px.

演示:http://jsfiddle.net/jtbowden/RDWt8/