jquery 用 mouseenter 和 mouseleave 动画 div答案

【问题标题】：jquery animate div with mouseenter and mouseleavejquery 用 mouseenter 和 mouseleave 动画 div
【发布时间】：2013-05-11 07:59:58
【问题描述】：

我正在尝试创建一个菜单，其中鼠标悬停的项目向右滑动。鼠标离开后，我想让 div 回到原来的位置。现在，当我将鼠标悬停时，div 向右移动，但当我将鼠标移出时，它只是停留在那里，不会向左移动。

<script> 
$(document).ready(function(){
   $(".menu_option").mouseenter(function(){
    $(".menu_option").animate({left:'50px'});
  });
  $(".menu_option").mouseleave(function(){
    $(".menu_option").animate({right:'50px'});
  });
});
</script>

css 是这样的

.menu_option {
height: 50px;
width: 150px;
position: relative;
}
.menu_holder {
float: left;
height: 300px;
width: 150px;
position: relative;
}

HTML

<div class="menu_holder">
<div class="menu_option">Content for  class "menu_one" Goes Here</div>
</div>

我哪里出错了？

【问题讨论】：

你能用你的代码发布jsfiddle.net吗？

标签： jquery mouseenter mouseleave

【解决方案1】：

鼠标离开你应该使用

$('.menu_option').mouseleave(function(){
    $('.menu_option').animate({left : 0});
});

【讨论】：

好吧，当然现在所有具有该名称的菜单项都会立即移动。有没有一种简单的方法可以让每个具有该类的 div 分别运行动画，还是我需要为每个 div 赋予自己的类名？
是的，只需要使用$(".menu_option").mouseleave(function(event) { $(event.currentTarget).animate({left:0}) });