使用jquery

Question

我正在尝试在悬停时为图像设置动画，并在鼠标离开时将其恢复到原始位置，图像会在鼠标离开之前生成动画。

这是我的代码

$(document).ready(function(){
    $('.logo').mouseenter(function(){
        $('.logo').animate({left: "100px"}); 
    }); 

     $('.logo').mouseout(function(){
      $('.logo').animate({right: "100px"}); 

    }); 
});

Answer 1

您可以使用-=根据属性的当前值递减属性。请注意，您需要在left属性上执行此操作，因为right是元素距包含元素右侧的距离，并且不是要设置的正确值。您还可以使用hover()方法使代码更简洁。试试这个：

$('.logo').hover(function() {
  $(this).animate({ left: "100px" }); 
}, function() {
  $(this).animate({ left: "-=100px" }); 
}); 

另请注意，您可以使用:hover伪选择器和transition来单独使用CSS。试试这个：

.logo {
  width: 200px;
  height: 200px;
  border: 1px solid #C00;
  position: absolute;
  transition: left .25s;
  left: 0;
}
.logo:hover {
  left: 100px;
}

<div class="logo">I am a logo!</div>

Answer 2

left事件回调中的mouseenter关键字未显示移动动画的方向，您可以在相反方向上以相同的移动大小重置，但是新值为<{1}}元素上的CSS属性。

在left上，您应该将mouseout CSS属性重置为其原始值（在您的情况下可能为0）：

left

但是，正如Rory在他的回答中所写，你可以不使用JavaScript而只使用CSS来实现这个动画。