2

我使用 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;
    }

如果您花时间阅读所有这些，请提前感谢您！

4

1 回答 1

2

我能够解决您的问题。如果您阅读了我对您最初帖子的评论，则 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 );
        });
    });
});
于 2013-05-22T19:57:47.457 回答