Question

如果您访问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);
    });
});

Answer 1

当你将孩子们悬停在#idag中时，会触发mouseout事件。设置div的动画是将鼠标从子节点移出，因此再次触发鼠标悬停事件。你可以使用

来阻止这种情况

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

在处理程序内部。

在.animate（）之前调用.stop（）以防止长动画队列也是一种好习惯。

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

.animate（）表现得很奇怪（重复动画）（jQuery）

2 个答案: