jquery - .animate 不适用于 .mouseenter/leave 事件？

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

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