jQuery 幻灯片 - 元素的宽度/高度错误

发布于 2025-01-08 09:58:41 字数 702 浏览 0 评论 0原文

我正在使用 jQuery UI 来制作信息框的动画。用户单击一个项目,然后弹出一个信息框。当我想隐藏它时,它应该从右侧滑出并滑回。

我显示信息框的代码如下:

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

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

#infoboxcontainer#infobox 都有 100% 宽度和高度的 CSS 样式,因此它填充了父项。

发生的情况如下:

  1. 该项目滑出,但它只有尽可能小的宽度/高度(即,如果我不操纵它,宽度/高度将会是多少)。您会看到一个小盒子在页面上一路移动,然后停在左上角。
  2. 当滑动动画完成时,元素突然捕捉到其预期的宽度/高度(即 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:

  1. 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.
  2. 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

多彩岁月 2025-01-15 09:58:41

找到了解决方案。显然,当您使用 .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 :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文