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/

jQuery UI幻灯片轻松兄弟推送

1 个答案: