当鼠标悬停在 Jquery .animate() 时，在 DIV 包装器内向右/向左移动图像答案

【问题标题】：move image inside a DIV wrapper right/left while mouse hover with Jquery .animate()当鼠标悬停在 Jquery .animate() 时，在 DIV 包装器内向右/向左移动图像
【发布时间】：2016-06-08 10:08:56
【问题描述】：

我有一个 400x300 像素的包装 div，我在里面放了 1140x300px 的图像，我想将图像移动到 div 内，将其向右移动 20px，同时将鼠标悬停，当鼠标不悬停时，图像向后移动等于它之前移动了多少像素

例如，如果我将鼠标悬停 1 秒，图像仅移动 10 像素，则图像后移 10 像素，如果我悬停 2-3 秒，图像移动 20-30 像素，则图像后移 20-30 像素

这是我创建的

CSS：

.img-wrp {
width : 400px;
height : 300px;
overflow : hidden;
}

.img {
position : relative;

}

HTML：

<script src="jquery-1.12.4.min.js"></script>
</head>
 <body>

     <div class="img-wrp">
         <img class="img" src="header web 1140.png"/>
     </div>

  <script>
   $(document).ready(function () { 
     $(".img").hover(
        function() {
          $(this).animate({"right" : "+=20px"}) 
           };
        function() {
          $(this).animate({"right" : "-=20px"}) 
           };
       );
     };
   </script>

我的错误在哪里？

【问题讨论】：

标签： jquery html

【解决方案1】：

这应该让你开始。

注意：2000 是速度 - 在 2000 毫秒内从这里移动到那里

$(document).ready(function () {
  
  $(".img").hover(
    function() {
      $(this).animate({"right" : "640px"},2000);
    },
    function() {
      $(this).animate({"right" : "0px"},2000) 
    }
  );

});//END document.ready

.img-wrp {
  width : 400px;
  height : 300px;
  overflow : hidden;
}

.img {
  position : relative;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="img-wrp">
    <img class="img" src="http://placekitten.com/1140/300" />
  </div>

【讨论】：