jquery - 让图像留在原处

Question

我正在尝试制作一个网站，其中包含连续三张图片。当鼠标悬停在图片上时，它会变大。我的问题是，当我将鼠标悬停在第一张图片上时，第二张图片水平移动，而当我将鼠标悬停在第二张图片上时，第三张图片垂直移动。将鼠标悬停在第三张图片上效果很好，但我想那是因为它向右对齐。
这是我的代码:

$(document).ready(function() {    
    $("#pic1").mouseover(function() {
		$("#pic1").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic2").mouseover(function() {
		$("#pic2").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic3").mouseover(function() {
		$("#pic3").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic1").click(function() {
		$("#pic1").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic2").click(function() {
		$("#pic2").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic3").click(function() {
		$("#pic3").animate({'width': '50px', 'height': '30px'}, 1000);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img class="allShow" id="pic1" style="width: 50px; height:30px" align="left" alt="Flagge der UN" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Small_Flag_of_the_United_Nations_ZP.svg"/> 
<img class="allShow" id="pic2" style="display: block; margin-left: auto; margin-right: auto; width: 50px; height:30px" alt="Ban Ki-Moon" src="http://www.un.org/sites/www.un.org/files/styles/thumbnail-responsive/public/2014/11/25/secretary-general-ban-ki-moon-speaking-press-conference_01b0a.jpg?itok=yCtESIJq"/>
<img class="allShow" id="pic3" alt="Mitglieder" style="width: 50px; height:30px; margin-top: -30px" align="right" src="http://static1.squarespace.com/static/54c7de19e4b0cece214f32ca/t/54db8f27e4b0512a94d8c06e/1423675177419/UN-flags.jpg?format=1500w" />

Answer 1

我建议使用 <table>为此:

$(document).ready(function() {    
    $("#pic1").mouseover(function() {
		$("#pic1").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic2").mouseover(function() {
		$("#pic2").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic3").mouseover(function() {
		$("#pic3").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic1").click(function() {
		$("#pic1").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic2").click(function() {
		$("#pic2").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic3").click(function() {
		$("#pic3").animate({'width': '50px', 'height': '30px'}, 1000);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div style="display: table; width: 1200px">
  <div style="display: table-row">
    <div style="display: table-cell; width: 400px; vertical-align: top">
      <img class="allShow" id="pic1" style="width: 50px; height:30px" align="left" alt="Flagge der UN" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Small_Flag_of_the_United_Nations_ZP.svg"/> 
    </div>
    <div style="display: table-cell; width: 400px; vertical-align: top; text-align: center;">
      <img class="allShow" id="pic2" style="width: 50px; height:30px" alt="Ban Ki-Moon" src="http://www.un.org/sites/www.un.org/files/styles/thumbnail-responsive/public/2014/11/25/secretary-general-ban-ki-moon-speaking-press-conference_01b0a.jpg?itok=yCtESIJq"/>
    </div>
    <div style="display: table-cell; width: 400px; vertical-align: top; text-align: right;">
      <img class="allShow" id="pic3" alt="Mitglieder" style="width: 50px; height:30px;" src="http://static1.squarespace.com/static/54c7de19e4b0cece214f32ca/t/54db8f27e4b0512a94d8c06e/1423675177419/UN-flags.jpg?format=1500w" />
    </div>
  </div>
</div>