jquery - 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 在元素周围添加的slideUp()/slideDown()上执行 / 来欺骗它：.ui-effects-wrapper

$("#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/