如何避免div动画形式落后于相对div？

Question

我有几个div扩展其包含的图像以调整大小...当盘旋时。然而，当我这样做时，他们会落后于相对的div。我提供了一个gyazo gif，这是代码。

提前感谢任何有帮助的人。我确实试过搞乱z-index，但我没有运气。

https://gyazo.com/13aabe5ecb2763a64f3c215fe207b05a?token=83f00c7326c06866638fdd590f78b9ea

	$(document).ready(function(){
		
		$(".temp_thumb_1").mouseenter(function(){	
			
			
			$("#template_2_wrapper").css({
				"opacity" : '0'
			});
			
			$("#template_1_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});
					
			$(".temp_thumb_1").animate({
				"width" : '628px',
				"height" : 'auto'
			});
			
		});		
		
		$(".temp_thumb_1").mouseleave(function(){
			
			$("#template_1_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
			$(".temp_thumb_1").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
		});
		
		
		$(".temp_thumb_2").mouseenter(function(){
			
			$("#template_2_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});
					
			$(".temp_thumb_2").animate({
				"width" : '628px',
				"height" : 'auto'
			});
		
			
		});		
		
		$(".temp_thumb_2").mouseleave(function(){
			
			$("#template_2_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
			$(".temp_thumb_2").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
		});
		
		
			$(".temp_thumb_3").mouseenter(function(){
			
			$("#template_3_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});
					
			$(".temp_thumb_3").animate({
				"width" : '628px',
				"height" : 'auto'
			});
		
			
		});		
		
		$(".temp_thumb_3").mouseleave(function(){
			
			$("#template_3_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
			$(".temp_thumb_3").animate({
				"width" : '157px',
				"height" : 'auto'
			});
			
		});
		
	});
	

#templates_sec_1{
	width:76%;
	margin:0 auto;
	background-color:#d7d7d7;
	height:200px;
}

#template_1_display, #template_2_display, #template_3_display{
	width:157px;
	height:100px;
    background-repeat: no-repeat;
    background-size: contain, cover;
	margin:0 auto;
}
	


#template_1_text_wrapper{
	height:100px;
	width:100%;
	background-color:white;
}

#template_1_hover, #template_2_hover, #template_3_hover{
	width:157px;
	height:200px;
	float:left;
}

.temp_thumb_1, .temp_thumb_2, .temp_thumb_3{
	width:157px;
	height:auto;
}

#template_1_text{
	height:100px;
	width:157px;
	background-color:white;

<div id='templates_sec_1'>
	<div id='template_1_hover'>
			<div id='template_1_display'>
				<a href=''><img src='images/template_1_thumbnail.png' class='temp_thumb_1'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>
	<div id='template_2_hover'>
			<div id='template_2_display'>
				<a href=''><img src='images/template_2_thumbnail.png' class='temp_thumb_2'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>	
	<div id='template_3_hover'>
			<div id='template_3_display'>
				<a href=''><img src='images/template_1_thumbnail.png' class='temp_thumb_3'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>
</div>

Answer 1

Z-index不起作用，因为您的问题在于模板的定位方式，您可以告诉它，因为只有右侧的项目放在正在放大的项目上。

你应该采取＆＃34; float：left＆＃34;关闭所有项目。然后通过给出父元素＆＃34; display：inline-flex＆＃34;

来定位模板

Answer 2

我能够通过将容器设置为相对来解决它。除了设置它是显示：inline-flex。激活jquery函数时，z索引现在可以正确更改。