jQuery - 애니메이션 DIV에 마우스 출력

Question

나는 내 자신의 애니메이션 드롭 다운 메뉴를 jQuery에 넣으려고하는데 이상한 결과를 얻고 있습니다. 나는 버튼 DIV와 메뉴 DIV를 감싸는 컨테이너를 가지고 있고, 아이디어는 (mouseover에서) 컨테이너 DIV와 메뉴 DIV의 높이를 메뉴 DIV가 CSS { 'display', 'block'}로 가져 오는 것이었다. 컨테이너 DIV (버튼과 메뉴 DIV가 모두 포함될 수 있도록 높이가 조정 된 것으로 가정)에서 마우스를 드래그하면 DIV를 원본 높이와 메뉴 DIV로 축소하여 CSS { 'display', 'none '}.

문제는 이제 모든 것이 확장 된 후 확대 축소 된 컨테이너 (높이 : 300px)의 mouseout을 다시 축소하는 대신 컨테이너의 원래 높이 (높이 : 100px)를 마우스로 이동 한 후 크기 조정이 시작된다는 것입니다. 새로운 것.

여기에 코드입니다 :

$('.container').mouseover(function(){ 
    $('.bob').css('display','block'); 
    $('.bob').animate({height: '200px'}); 
    $(this).animate({height: '300px'}); 
}); 

$('.container').mouseout(function(){ 
    $('.bob').animate({height: '0'}, 
      function(){ 
      $('.bob').css('display','none'); 
      }); 
    $(this).animate({height: '100px'}); 
}); 

Answer 1

을 도울 수있는이 코드

if($(elem).is(':animated')) {...} 

희망과 그것을 할 수 있습니다 당신은 아마 그 변화 상태에서 "라이브".container 요소를 얻기 위해 이벤트에 사용해야합니다. mouseout/mouseover를 다시하기 전에 애니메이션이 끝나지 않았을 경우를 대비하여 stop() 함수를 추가하여 애니메이션을 중단했습니다.

$(document).on('mouseover', '.container', function(){ 
    $('.bob').css('display','block'); 
    $('.bob').stop(true, false).animate({height: '200px'}); 
    $(this).stop(true, false).animate({height: '300px'}); 

}); 



$(document).on('mouseout', '.container', function(){ 
    $('.bob').stop(true, false).animate({height:0}, 
     function(){ 
      $('.bob').css('display','none'); 
     }); 
    $(this).stop(true, false).animate({height: '100px'}); 
}); 

EDIT : 이것은 이후에 DOM 첨가 변경된 DOM 요소 또는 요소 청취 JQuery와의 (현재 사용되지 않음) 살() 함수를 사용 같다

여기 설명을 요청한 js로 시간. $ ('. container') 만 사용하는 경우 mouseover() 페이지로드시 DOM 요소를 수신합니다 (100px 높이). 요소가 변경되었음을 "인식"하지 않습니다.

정지 기능은 새로운 애니메이션이 시작되기 전에 현재 진행중인 요소의 애니메이션이 중지되지 않도록하기위한 것입니다.

http://api.jquery.com/stop/

Answer 2

이 당신을 도울 수 있다면 나도 몰라,하지만 내 JQuery와 애니메이션의 많은 문제를 해결했다.

요소에서 애니메이션을 수행하기 전에 해당 요소가 이미 애니메이션으로 재생되고 있는지 확인할 수 있습니다. 당신이 당신에게