使用mouseenter和mouseleave的jquery animate div

时间:2013-05-11 07:59:59

标签: jquery mouseenter mouseleave

我正在尝试创建一个菜单,其中鼠标所在的项目向右滑动。鼠标离开后,我想让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>

我哪里错了?

1 个答案:

答案 0 :(得分:1)

对于鼠标休假,您应该使用

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