Question

我有一个包装div 400x300 px，在里面我把图像放到了1140x300px，我想在div中移动图像，向右移动20px，同时悬停鼠标，当鼠标没有悬停时，图像

之前向后移动等于它移动了多少像素

例如，如果我将鼠标悬停在1s，图像移动仅10px，图像向后移动10px，如果我将鼠标悬停2-3s，图像移动20-30px，则向后移动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>

我的错误在哪里？

Answer 1

这应该让你开始。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

鼠标悬停在Jquery .animate（）时，右/左移动DIV包装内的图像

1 个答案: