jQuery UI slide ease sibling push

问题

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

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

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.

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

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

Any advice would be appreciated.

回答1:

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);
    }
});

Demo: http://jsfiddle.net/jtbowden/LARkS/

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

Demo: http://jsfiddle.net/jtbowden/RDWt8/

来源：https://stackoverflow.com/questions/10092794/jquery-ui-slide-ease-sibling-push