Question

我正在尝试为我的网站制作菜单。我希望实现菜单项分别在悬停或关闭时正确和返回。但没有任何事情发生。这是我的代码：

$(document).ready(function(){
        $(".item").hover(function(){
            $(this).animate({
                right: "-=100px";
                }, "slow";
            );
            , $(this).animate({
                right: "+=100px";
                }, "slow";
            );
        }); 
    });

Answer 1

首先，您的语法不正确。

您可能还想使用on("mouseover")代替hover()，因为我认为您不想在mouseout上启动动画。如果您使用hover，就会发生这种情况。

另一件事是你不想在当前正在运行的情况下运行动画。这会导致一些意想不到的行为。

以下是使用mouseover的正确语法的代码：

$(document).ready(function () {

    $(".item").on("mouseover", function () {

        // run the animation only if the item is NOT animating
        if (!$(this).is(':animated')) {

            $(this).animate({
                right: "-=100px"
            }, "slow", function () {
                // first animation completed
                $(this).animate({
                    right: "+=100px"
                }, "slow");
            });

        }

    });

});

我做了一个演示：http://jsfiddle.net/131o4hb0/4/

jQuery .animate在悬停后无法正常工作

1 个答案: