1

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

2 回答 2

2

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

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

在您的处理程序内部。

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

于 2012-04-24T20:28:30.823 回答
1

您可以改用它：

$(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");
});
于 2012-04-24T20:30:00.173 回答