.animate() действует странно (повторяющаяся анимация) (jQuery)

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

Вы можете использовать вместо этого:

$(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 - вытаскивание мыши из дочерних элементов, так что событие mouseover запускается снова. Вы можете предотвратить это с помощью

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

внутри обработчиков.

Также является хорошей практикой для вызова .stop() перед .animate() для предотвращения длинных очередей анимаций.