。動畫（）動作怪異（重複動畫）（jQuery）

Question

如果您訪問http://ngmat.site90.net/並將鼠標懸停在文本上方的左上角的小黑盒中，它應該放大顯示所有文本。它現在正是我想要的，但它以一種非常奇怪的方式實現了它。它有時會一遍又一遍地重複動畫，嗯，我想你必須親自看看它，因爲我不知道它爲什麼這樣做。

編輯：我用了一點小技巧，如果高度已經設置爲「auto」，我想出了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

您可以使用它代替：

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

Answer 2

當你將鼠標懸停內#idag的兒童時，將觸發mouseout事件。動畫div是將鼠標移出兒童，因此鼠標懸停事件再次觸發。 你可以阻止這種使用

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

您處理內部，。

在.animate（）之前調用.stop（）以防止漫長的動畫隊列也是一種很好的做法。