.animate不能與.mouseenter/leave事件一起使用？

Question

我有一個div如下。

HTML：

<div id="leftdock"></div> 

CSS：使用jQuery

#leftdock 
{ 
    position: absolute; 
    float:left; 
    height: 400px; 
    width: 200px; 
    margin-left: -50px; 
    border-radius: 0px 10px 10px 0px; 
    background-color: #BADA7F; 
    top: 30%; 
} 

以下的JavaScript：

$(document).ready(function() { 
    $('#leftdock').mouseenter(function() { 
     $(this).animate({ 
     margin-left: "-25px" 
     }, 500); 
    }); 

    $('#leftdock').mouseleave(function() { 
     $(this).animate({ 
     margin-left: "-25px" 
     }, 500); 
    }); 
}); 

但有了這個動畫不起作用。我的div margin-left甚至不會隨着mouseenter/leave而改變。

Answer 1

在控制檯中有一個錯誤，它應該是引號中的「margin-left」，而25px代替-25px。

Demo

$(document).ready(function() { 
    $('#leftdock').mouseenter(function() { 
     $(this).animate({ 
     "margin-left": "25px" 
     }, 500); 
    }); 

    $('#leftdock').mouseleave(function() { 
     $(this).animate({ 
     "margin-left": "-25px" 
     }, 500); 
    }); 
});