JQuery UI 在 Chrome 上隐藏/显示 div 位置跳转答案

【问题标题】：JQuery UI hide/show div position jumps on ChromeJQuery UI 在 Chrome 上隐藏/显示 div 位置跳转
【发布时间】：2013-05-22 05:43:04
【问题描述】：

我使用 JQuery UI 制作了一个按钮，在页面上隐藏一个 div，并显示另一个。

我有一个包装 div，里面有 2 个可见的 div 和 1 个隐藏的 div。第一个可见的 div 永远不会移动。 div 2 被隐藏，当我按下按钮时 div3 会出现。当我按下按钮时，div 2 和 div 3 “退出”/退出屏幕。在 Chrome 中的这个动画中，他们的位置被弄乱了。

在 IE 或 Firefox 中不会出现此问题。

我认为问题可能是：

-在浮动上：在 div2 和 div3 中，或者

-display:none 在 div3 上，因为损坏的动画似乎发生在 div3 所在的位置，如果它可见的话。

我需要两个 div 都在右边，所以我需要保持 float:right，如果可能的话。

这是一个代码示例和 jsfiddle 的链接：（请使用 Chrome）

http://jsfiddle.net/mZtWY/4/

    #wrapper {
        width: 300px;
        height: 150px;
        border: 1px solid black;
    }
    #box1 {
        width: 150px;
        height: 100px;
        border: 1px solid blue;
        display: inline-block;
    }
    #box2 {
        width: 120px;
        height: 120px;
        border: 1px solid yellow;
        float: right;
        display: inline-block;
    }
    #box3 {
        width: 120px;
        height: 120px;
        border: 1px solid red;
        float: right;
        display: inline-block;
        display:none;
    }

提前感谢您花时间阅读所有这些内容！

【问题讨论】：

这是因为你的 inline-block 属性。如果你从每个 box1、box2 和 box 中去掉 inline-block 属性。当您在这样做之后运行 JSFiddle 时，在单击按钮之前，您会注意到您的初始黄色 div 与它下降到然后平移的确切位置对齐。出于某种原因，chrome/jqueryui 认为您的 div 是在这里呈现的，但它出现得更多。因此，当您触发隐藏效果时，它会移动到该位置，然后向右下降，因为 jquery 告诉它向右下降。

标签： jquery css jquery-ui show-hide jquery-effects

【解决方案1】：

我能够解决您的问题。如果您阅读了我对您最初帖子的评论，则 inline-block 属性有点愚弄您。如果您删除了它，那么您会看到黄色框，在单击按钮之前，现在位于框向下滑动然后向右滑动的位置。所以当 jQuery 触发事件时，出于某种原因，它认为位置在那个位置，并告诉它从那里开始动画。你需要做的是让 box1 向左浮动，而 box2 和 box3 向右浮动。然后在这 3 个 div 的正下方，添加另一个 div。这个 div 是一个“清晰”的 div。基本上它通知浮动元素如何对齐。这是我修改后的 JSFiddle：

http://jsfiddle.net/6yj8f/

编辑：我添加了错误的 JSFiddle 链接。

这是我的代码：

HTML：

<body>
    <input type = "button" id = "button" value = "button">
    <div id = "wrapper">
        <div id = "box1"></div>
        <div id = "box2"></div>
        <div id = "box3"></div>
        <div class="clear"></div>
    </div>
</body>

CSS：

.clear {
    clear: both;
}

#wrapper {
    width: 300px;
    height: 150px;
    border: 1px solid black;
}

#box1 {
    width: 150px;
    height: 100px;
    border: 1px solid blue;
    display: block;
    float: left;
}

#box2 {
    width: 120px;
    height: 120px;
    border: 1px solid yellow;
    float: right;
    display: block;
}
#box3 {
    width: 120px;
    height: 100px;
    border: 1px solid red;
    float: right;
    display: none;
}

jQuery:

$(document).ready(function(){
$('#button').click(function(){
        $('#box2').hide( "drop", { direction: "right" }, 300, function () { 
            $('#box3').show( "drop", { direction: "right" }, 300 );
        });
    });
});

【讨论】：

哇，非常感谢汤姆！几天来我一直在寻找修复程序，但我找不到任何适用于这种情况的东西......它现在在任何浏览器上都非常顺利:) 只是出于好奇，你花了多长时间才找到解决方案？
老实说，大约 10 分钟。我的职业是软件开发人员。我使用 CSS 和 jQuery 已经有一段时间了，我知道如何解决这样的调试问题。我做的第一件事是去掉一些定义元素如何出现的 CSS 属性，因为浏览器呈现不同的外观。浮动属性是最麻烦的一个。所以我删除了它并且能够看到这不是问题。然后我删除了显示属性并将其设置为阻止。就在那时我注意到了这个问题。然后它只是简单地设置新元素的样式以将这些正确的框向上移动。
另外，从我上面的评论中跟进。有时 inline-block 与浮点数混合会导致一些问题，因为浏览器在幕后完成了很多工作。通常，当我使用 float 尝试将 2 个 div 彼此相邻放置时，我会像您一样制作一个主包装元素，然后添加 2 个 div，其中一个向左浮动，另一个向右浮动。您需要那个清晰的 div 来告诉他们使用它作为底部对齐。或者，如果您在其下方有另一个容器，则可以将 clear css 属性添加到该容器中，而不是空白元素。附言请检查这个作为答案！
哇，非常感谢您解释这里发生的事情！你的调试方法也很有用。