IE8에서 jQuery로 페이드 인 및 페이드 아웃 문제가 발생했습니다.

Question

jquery가있는 버튼에서 페이드 인하 고 페이드 아웃하고 있습니다. 여기에서보십시오 : http://evermight.com/test.

어떻게 Google 크롬에서는 호버 상태가 잘 전환되지만 IE8에서는 그렇지 않습니까? IE8에서는 한 번의 마우스 오버로 다중 전환/페이드가 발생할 수 있습니다. IE8이 Chrome에서 버튼 이벤트를 렌더링하도록하려면 어떻게해야합니까?

Answer 1

사용 .stop() 및 .animate()

$('.btn-rollover .text').hover(

function() { 
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.0}, 500); 
}, function() { 
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.8}, 500); 
}); 

http://jsfiddle.net/tfspz/

Answer 2

mouseover/mouseout 대신 mouseenter 및 mouseleave 이벤트를 사용하십시오.

jQuery(document).ready(function($) { 
    $('.btn-rollover .text').bind('mouseenter', function(){ 
     $(this).closest('.btn-rollover').find('.overlay').stop().fadeOut(); 
    }).bind('mouseleave', function(){ 
     $(this).closest('.btn-rollover').find('.overlay').stop().fadeIn(); 
    }); 

}); 

사항은 또한 단지 애니메이션 호출 (.fadeOut() 및 .fadeIn()) 전에 .stop()을 추가했습니다. 그러면 다음 애니메이션을 호출하기 전에 현재 애니메이션이 정지됩니다. 애니메이션을 하나씩 차례로 대기시키기보다는 현재 실행중인 애니메이션이 중단되고 새로운 애니메이션이 즉시 시작됩니다.