Question

悬停时，我想移动顶部图片以显示其下的图片。 DOM中的左右值都在变化，但视觉图像不会移动。

$(document).ready(function(){
	var left = $('#left').offset().left;
	var right = $('#right').offset().right;
	$("#left").hover(
		function(){
			$("#right #top").css({right:right}).animate({"right": "+=100px"},"slow");
		
		},
		function(){
			$("#right #top").css({right:right}).animate({"right": "-=100px"},"slow");
		});
	
	$("#right").hover(
		function(){
			$("#left #top").css({left:left}).animate({"left": "-=100px"},"slow");
		
		},
		function(){
			$("#left #top").css({left:left}).animate({"left": "+=100px"},"slow");
		});
});

html,body,#wrapper{
  height: 100%;
  min-height: 100%;
}

#wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

#center{
	width: 800px;
	text-align:center;
	position:relative;
}

img{
	width:100%;
	height:auto;
	float:left;
}

#left{
	width:400px;
	float:left;
	position:absolute;
}

#right{
	width:400px;
	float:right;
}

#top{
	z-index:1;
}

#under{
   z-index:-1;
   float: none;
   height: auto;
   left: 0;
   position: absolute;
   width: 400px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style1.css">	
		<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="center">
				<div id="left">
					<img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top">
					<img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
				</div>
				<div id="right">
					<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">
					<img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top">
				</div>
			</div>
		</div>
	</body>
	
	<footer>
	</footer>
</html>

我猜在css中使用position属性有问题吗？

小提琴看起来像这样：https://jsfiddle.net/bjgydLvo/4/

左边的动画不会移动元素

0 个答案: