左边的动画不会移动元素

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?

中使用位置属性有问题

而 fiddle 看起来像这样：https://jsfiddle.net/bjgydLvo/4/

Answer 1

一个问题是您有多个具有相同 ID 的元素。 ID 是唯一标识符 - 您可能希望使用 classes 代替。

在 this fiddle 中，我删除了 #top 并将 under 从 ID 更改为 class，因为您使用了它两次。

动画现在可以运行了。如果这不是您想要的结果，请在下方评论。

Answer 2

Class你的动图并添加以下内容CSS

.animate{
  left:0;
  transition:all .2s;
  position:relative;
}

jQuery

$('#center').mouseenter(function(){
    $('.animate').css('left','-100%')
})
$('#center').mouseleave(function(){
    $('.animate').css('left','0')
})

例子 https://jsfiddle.net/8fbohssn/1/

如果您想在滑动图像离开时隐藏它，只需将 overflow:hidden; 添加到父容器

例子 https://jsfiddle.net/8fbohssn/2/

左边的动画不会移动元素

Animating on left doesnt move element

html

css

jquery

css-position

jquery-animate