Question

我正在使用jQuery UI动画信息框。用户点击某个项目，然后弹出信息框。当我想隐藏它时，它应该从右侧滑出并向后滑动。

显示信息框的代码如下：

function ShowInfoBox() {
    var boxcontent = '<b>SOME HTML</b>';
    $("#infobox").html(boxcontent);

    $("#infoboxcontainer").show("slide", { direction: "right" }, 1300);
}

#infoboxcontainer和#infobox都有100％宽度和高度的CSS样式，因此它会填充父项。

以下是：

该项目滑出，但它只有较小的宽度/高度（即如果我没有操纵它，宽度/高度是多少）。你会看到一个小盒子在它穿过页面之前一直穿过页面。
当滑动动画完成时，元素会突然捕捉到预期的宽度/高度（即100％）。

在正确应用宽度/高度样式后，我似乎无法找到使元素滑动的方法。我甚至尝试设置超时等，但似乎它会在显示项目后始终调整尺寸。

任何人都知道如何解决这个问题？

旁注：之后隐藏项目时，它不会回溯到较小的版本。隐藏的工作应该是这样的。

Answer 1

找到解决方案。显然，当你使用.show('slide', 'down',500)时，将获取最大宽度/高度，然后它将被动画化。使用.slideUp(500);，可以正确调整宽度/高度。

解决方案：jQuery UI中的错误：）

jQuery slide - 元素的宽度/高度错误

1 个答案: