Question

我使用JQuery UI创建一个隐藏页面div的按钮，并显示另一个。

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

在IE或Firefox中不会发生此问题。

我认为问题可能是：

- 浮点数：右侧div2和div3，OR

div3上的

-display：none，因为破坏的动画似乎发生在div3所在的位置，如果它是可见的。

我需要两个div在右边，所以我需要保持浮动：如果可能的话，正确。

这是一个代码示例并链接到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;
    }

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

Answer 1

我能解决你的问题。如果您在初始帖子上阅读我的评论，那么内联块属性就会让您感到愚蠢。如果你删除了它，那么你会看到黄色框在点击按钮之前，现在位于框滑动然后向右滑动的位置。因此，当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 );
        });
    });
});

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

1 个答案: