。動畫不能與.mouseenter/.mouseleave事件一起使用？

Question

我有一個div如下。

html: 

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

css: 

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

使用jQuery 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

這可能會解決你的問題

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

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

Answer 2

變化

margin-left: "-25px" 

到

marginLeft: "-25px" 

jsFiddle example