jquery帶mouseenter和mouseleave的動畫div

我正在嘗試創建一個菜單，鼠標移過來的項目向右滑動。鼠標離開後，我想讓div移回原來的位置。現在，當我將鼠標移到右側時，div移動到右側，但是當我將鼠標移出時，它只停留在那裏，不會移回左側。jquery帶mouseenter和mouseleave的動畫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>

我要去哪裏錯了？

來源

2013-05-11 Milksnake12

你能張貼了一份http://jsfiddle.net與您的代碼？ – 2013-05-11 08:04:52

對於鼠標離開你應該使用

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

來源

2013-05-11 08:06:44 drinchev

謝謝！它完美的工作！ – Milksnake12 2013-05-11 08:11:14

那麼，當然現在所有帶有這個名字的菜單項都會一次移動。是否有一種簡單的方法可以讓每個div與該類分別運行動畫，還是需要分別賦予它們自己的類名？ – Milksnake12 2013-05-11 08:14:55

是的，只是使用'$（「。menu_option」）。mouseleave（function（event）{$（event.currentTarget）.animate（{left：0}）}）;'' – drinchev 2013-05-11 08:18:06

jquery帶mouseenter和mouseleave的動畫div

回答

相關問題