jQuery UI - 滑出并推送相邻内容

Question

我是jQuery UI的新手,我正在尝试做一个简单的动画.当动画被触发时,我想要一个按钮滑出并按下它旁边的任何内容来填充空间.

使用幻灯片动画,我设法让按钮滑出,但内容弹出到新位置而不是被滑动按钮推过.另外一个问题是,完成幻灯片动画后,按钮似乎会弹出它的全尺寸.

问:当滑动当前占据该空间的内容时,如何向对象显示幻灯片？

JSFiddle http://jsfiddle.net/Dragonseer/z8mAY/

现行守则

$("#deleteButton").hide();
$("#editButton").click(function()
{
    $("#deleteButton").toggle("slide", { direction: "right" }, 1500);                          
});

Answer 1

这是我对你的问题的看法,但是它使用CSS代替jQuery,它在现代浏览器和手机/平板电脑上运行得更好,但对于旧版本的IE却没有那么多:http: //jsfiddle.net/z8mAY/21/

CSS:

div {
    display: flex;
}

article {
    width:100%;
    margin: 5px;
    transition: all 1s;
}

div button {
    -moz-box-sizing: border-box;
    width: 0;
    transition: all 1s;
    float:right;
    overflow:hidden;
    opacity:0;
}

.expanded article {
    width: calc(70% - 5px);

}
.expanded button {
    width: 30%;
    opacity:1;
}

JS:

$("#editButton").click(function()
{
    $('div').toggleClass('expanded');
});

我保持尽可能接近原件,但在生产中,我可能会使用相对/绝对定位按钮,保持固定宽度,并将其滑入.此外,您需要全部使用你想要支持的CSS的浏览器前缀,我只包括在firefox中工作所必需的.