jQuery UI幻灯片简化同级推送 [英] jQuery UI slide ease sibling push

问题描述

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

I'm using jQuery UI's slide toggle effect to toggle a div:

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

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

Slide is the only effect that has the animation that I want, essentially, the div coming down from the top. I don't want toggleSlide because that sort of just changes the height of the element.

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

The only problem with slide is that it immediately pushes siblings around to the end positions: http://jsfiddle.net/XYDyy/2/

那么，有什么方法可以使同级元素随着动画div的调整而调整其位置?

So is there some way to have sibling elements adjust their position as the animating div adjusts?

任何建议将不胜感激.

推荐答案

您可以对jQuery在元素周围添加的.ui-effects-wrapper进行slideUp()/slideDown()作弊:

You can cheat it by doing a slideUp()/slideDown() on the .ui-effects-wrapper that jQuery adds around the element:

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

Otherwise, you could add your own wrapper, and do the slideUp on it, with the position of #div1 set to bottom: 0px.

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

这篇关于jQuery UI幻灯片简化同级推送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！