.animate不使用.mouseenter /离开事件？

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的javascripts之后：

$(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 even而改变。

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);
    });
});