我使用 JQuery UI 制作了一个按钮，隐藏页面上的一个 div，并显示另一个。
我有一个包装 div，里面有 2 个可见 div 和 1 个隐藏 div。第一个可见的 div 永远不会移动。 div 2 被隐藏，当我按下按钮时 div3 就会出现。 当我按下按钮时，div 2 和 div 3 “掉”出/掉入屏幕。在 Chrome 中的这个动画过程中，它们的位置变得困惑。
此问题在 IE 或 Firefox 中不会发生。
我认为问题可能是:
-要么在 float:right 上，要么在 div2 和 div3 中，或者
-display:none on div3，因为损坏的动画似乎发生在 div3 所在的位置(如果它可见)。
我需要两个 div 都位于右侧，因此如果可能的话，我需要保持 float:right。
这里是一个代码示例和 jsfiddle 的链接:(请使用 Chrome)
#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 属性有点欺骗了您。如果您删除了它，那么您会看到在单击按钮之前黄色框现在位于该框向下滑动然后向右滑动的位置。因此，当 jQuery 触发该事件时，由于某种原因，它认为位置就在那个位置，并告诉它在那里开始动画。您需要做的就是使 box1 向左浮动，使 box2 和 box3 向右浮动。然后在这 3 个 div 的正下方添加另一个 div。这个div是一个“清晰”的div。基本上它通知 float 元素如何对齐。这是我修改后的 JSFiddle:
编辑:我添加了错误的 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 上跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16684271/