在让我的 jQuery 正确时遇到了一些麻烦。本质上，我想单击一个 div，.fadeOut 旁边的另外两个“inline-block”div。将“点击”的 div 以及 .fadeIn 另一个（隐藏的）div 保持在相同的位置。我面临的问题是“点击”的 div 的位置会在其他两个淡出时移动，并且也会正确地将另一个（隐藏的）div 带入。我关注了一些类似的帖子，这些帖子建议改变元素的位置，但这会影响我拥有的布局良好的风格。（如果我的帖子太长，请原谅，这是我第一次发帖！）
我也不知道我将如何引入容器右侧的“隐藏”div。
这是html：
<div id = "maincontainer">
<div id ="container">
<div id = "table1">
<table>
<tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
<tr><td><p> some text </p></td></tr>
</table>
</div>
<div id = "table2">
<table>
<tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
<tr><td><p> some text </p></td></tr>
</table>
</div>
<div id = "table3">
<table>
<tr><td> <img src = "https://si0.twimg.com/profile_images/3109305038/9db39242a7a4024666eb202871ba6bd8_normal.jpeg" /></td></tr>
<tr><td><p> some text </p></td></tr>
</table>
</div>
</div>
</div>
jQuery：
$(document).ready(function(){
$('#table1').click(function(){
$('#table2').fadeOut(1000);
$('#table3').fadeOut(1000);
});
});
的CSS：
#maincontainer {
background-color: white;
width: 968px;
height: auto;
margin: auto;
margin-top: 65px;
margin-bottom: 65px;
}
#container {
height: 556px;
width: 100%;
margin: auto;
text-align: center;
background-color: blue;
}
#table1 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}
#table2 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}
#table3 {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 45px;
}
演示：小提琴