javascript - 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 中工作所必需的那些。