.animate() 行为怪异（重复动画）（jQuery）答案

【问题标题】：.animate() acting weird (repeating animation) (jQuery).animate() 行为怪异（重复动画）（jQuery）
【发布时间】：2012-04-24 20:17:26
【问题描述】：

如果您访问http://ngmat.site90.net/ 并将鼠标悬停在左上角带有文本的小黑框上，它应该会放大以显示所有文本。它正是我现在想要的，但它以一种非常奇怪的方式做到了。它有时会一遍又一遍地重复动画，我想你必须自己看到它，因为我不知道它为什么会这样做。

编辑：如果高度设置为“自动”，我使用了我想出的一个小技巧来获取 div 的高度，这可能是问题吗？

这是 JavaScript

$(document).ready(function(){
    var idagHeight = parseInt($("#idag").css('height'));
    var idagWidth = parseInt($("#idag").css('width'));
    var idagPopUpLeft = parseInt($("#idagPopUp").css('left'));

    $("#idag").css({"height": "auto", "width": idagWidth+30});
    var idagTempHeight = $("#idag").height();
    $("#idag").removeAttr("style");


    $("#idag").mouseover(function(){
        $(this).animate({height: idagTempHeight, width: idagWidth+30}, 300);
        $("#idagPopUp").animate({left: idagPopUpLeft+30}, 300);
    });
    $("#idag").mouseout(function(){
        $(this).animate({height: idagHeight, width: idagWidth}, 300, function(){$("#idag").removeAttr("style");});
        $("#idagPopUp").animate({left: idagPopUpLeft}, 300);
    });
});

【问题讨论】：

标签： jquery jquery-animate repeat

【解决方案1】：

当您将子项悬停在#idag 中时，会触发 mouseout 事件。对 div 进行动画处理是将鼠标从子项中移出，因此会再次触发 mouseover 事件。您可以使用

来防止这种情况发生

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

在您的处理程序内部。

在 .animate() 之前调用 .stop() 也是一种很好的做法，可以防止动画排长队。

【讨论】：

【解决方案2】：

您可以改用这个：

$(document).ready(function(){
    var idagHeight = parseInt($("#idag").css('height'));
    var idagWidth = parseInt($("#idag").css('width'));
    var idagPopUpLeft = parseInt($("#idagPopUp").css('left'));

    $("#idag").hover(function(){
        $(this).stop().animate({height: "+=30", width: "+=30"}, 300);
        $("#idagPopUp").stop().animate({left: "+=30"}, 300);
    }, function(){
        $(this).stop().animate({height: idagHeight, width: idagWidth}, 300);
        $("#idagPopUp").stop().animate({left: idagPopUpLeft}, 300);
    });
});

或者如果您不知道最终的块高度，您可以将第一个动画函数更改为：

$(this).stop().animate({width: "+=30"}, 300, function() {
    $(this).css("height", "auto");
});

【讨论】：