【发布时间】：2012-02-24 13:19:47
【问题描述】：
我正在使用 jQuery UI 为信息框设置动画。用户点击一个项目，然后弹出一个信息框。当我想隐藏它时，它应该从右侧滑出并向后滑动。
我显示信息框的代码如下：
function ShowInfoBox() {
var boxcontent = '<b>SOME HTML</b>';
$("#infobox").html(boxcontent);
$("#infoboxcontainer").show("slide", { direction: "right" }, 1300);
}
#infoboxcontainer 和 #infobox 都具有 100% 宽度和高度的 CSS 样式，因此它会填满父项。
会发生以下情况：
- 该项目滑出，但它只有可能的最小宽度/高度（即，如果我不操纵它，宽度/高度会是多少）。您会看到一个小盒子在页面的左上角一直移动。
- 滑动动画完成后，元素会突然对齐到其预期的宽度/高度（即 100%）。
在正确应用宽度/高度样式后，我似乎找不到让元素滑动的方法。我什至尝试设置超时等，但它似乎总是会在显示项目后调整尺寸。
有人知道如何解决这个问题吗？
旁注：之后隐藏该项目时，它不会恢复为较小的版本。隐藏作品应有的作用。
【问题讨论】：
-
当元素滑动时，它可能有一个绝对位置。我很确定当元素设置了绝对位置时，您不能将其设置为 100% 宽度。
-
我也是这么想的。但是我的 nfoboxcontainer 现在有以下 css： position:absolute;左：10px；右：360px；底部：92px；顶部：45px； -- 而不是 100% 设置。和以前一样的问题。
-
有趣。只是为了好玩，尝试以像素为单位设置指定的高度/宽度，看看行为是否相同。
-
当我将其设置为 500 像素时，它会保持其高度。然而，最困扰我的是：幻灯片动画从元素本身的边缘开始滑动元素（我从右侧滑动，所以我的滑动从左侧偏移到右侧开始，然后它减少偏移直到元素就位。但是，我的元素开始在 100% 时应该在的位置滑动。但是元素本身显示的比滑动动画认为的要小...
-
嗯...我不确定我是否能做到 100%。你能举个关于 jsfiddle 的例子吗？