jQuery 幻灯片 - 元素的宽度/高度错误
我正在使用 jQuery UI 来制作信息框的动画。用户单击一个项目,然后弹出一个信息框。当我想隐藏它时,它应该从右侧滑出并滑回。
我显示信息框的代码如下:
function ShowInfoBox() {
var boxcontent = '<b>SOME HTML</b>';
$("#infobox").html(boxcontent);
$("#infoboxcontainer").show("slide", { direction: "right" }, 1300);
}
#infoboxcontainer
和 #infobox
都有 100% 宽度和高度的 CSS 样式,因此它填充了父项。
发生的情况如下:
- 该项目滑出,但它只有尽可能小的宽度/高度(即,如果我不操纵它,宽度/高度将会是多少)。您会看到一个小盒子在页面上一路移动,然后停在左上角。
- 当滑动动画完成时,元素突然捕捉到其预期的宽度/高度(即 100%)。
我似乎找不到一种方法可以在正确应用宽度/高度样式后使元素滑动。我什至尝试设置超时等,但似乎它总是会在显示项目后调整尺寸。
有人知道如何解决这个问题吗?
旁注:之后隐藏该项目时,它不会弹回到较小的版本。隐藏就像它应该的那样。
I'm using jQuery UI to animate an infobox. User clicks on an item, then an infobox pops up. It should slide out from the right and slide back when I want to hide it.
My code to show the infobox is as follows:
function ShowInfoBox() {
var boxcontent = '<b>SOME HTML</b>';
$("#infobox").html(boxcontent);
$("#infoboxcontainer").show("slide", { direction: "right" }, 1300);
}
The #infoboxcontainer
and the #infobox
both have a CSS style of 100% width and height, so it fills up the parent item.
What happens is the following:
- The item slides out, but it only has the smalles possible width/height (i.e. what the width/height would be if I didn't manipulate it). You see a tiny box travelling all they way across the page before it settles in the topleft corner.
- When the sliding animation is complete, the element suddenly snaps to its intended width/height (i.e. 100%).
I can't seem to find a way to make the element slide after the width/height styles have properly been applied. I even tried setting timeouts etc but it seems it will always adjust the dimensions after revealing the item.
Anyone have an idea how to fix this?
Side note: when hiding the item afterwards, it does not snap back to a smaller version. Hiding works like it should.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
找到了解决方案。显然,当您使用
.show('slide', 'down',500)
时,将采用最大宽度/高度,然后将其动画化。通过使用.slideUp(500);
,可以正确调整宽度/高度。解决方案:jQuery UI 中的错误:)
Found the solution. Apparently, when you use
.show('slide', 'down',500)
the max width/heigt will be taken, then it will be animated. By using.slideUp(500);
, the width/heigth is properly adjusted.Solution: bug in jQuery UI :)