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 跟踪 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。

演示

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

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