jQuery 호버 기능이 매우 느리게 실행되는 경우

Question

다음 기능은 작동하지만 호버에 반응하는 속도가 매우 느립니다. 기본적으로 나는 "드롭 다운"이있는 페이지의 중간에있는 탐색기를 가지고 있습니다. 그러면 사용자가 페이지의 맨 위로 스크롤 할 때 탐색기는 끈적 거리고 "드롭 다운"됩니다. 하지만 내가 말했듯이, 호버에 반응하는 것은 매우 느리고 왜 이유가 확실하지 않습니다.

$('.main-navigation li a').hover(function() { 

if ($('.main-navigation').hasClass('main-nav-pos')) { 

$('.main-nav-pos li a').hover(
function() { 
//display heading and caption 
$(this).children('.nav-info').animate({"height":"100%"}, 100); 
$(this).children('.nav-info').animate({"top":"-105%"}, 'fast'); 
$(this).children('.butterfly').css({"display":"block"}, 'slow'); 
}, 

function() { 
//hide heading and caption 
$(this).children('.nav-info').animate({"height":"0"}, 100); 
$(this).children('.nav-info').animate({"top":"0%"}, 'fast'); 
$(this).children('.butterfly').css({"display":"none"}, 'slow'); 
} 
); 

} else { 

$('.main-nav-fixed li a').hover(
function() { 
    //display heading and caption 
    $(this).children('.nav-info-fixed').animate({"height":"100%"}, 100); 
    $(this).children('.nav-info-fixed').animate({"top":"105%"}, 'fast'); 
    }, 
function() { 
    //hide heading and caption 
    $(this).children('.nav-info-fixed').animate({"height":"0"}, 100); 
    $(this).children('.nav-info-fixed').animate({"top":"0%"}, 'fast'); 
    } 
    ); 
} 
}) 

Answer 1

가 먼저 $('.main-navigation li a').hover() 동안 더 많은 .hover() 핸들러를 추가, 이상한 행동 및 성능의 모든 종류의 결과 : 여기

는 jsfiddle> http://jsfiddle.net/acrane/dgvj7Ls7/

및 기능입니다.

는 다음과 같이 코드를 재 작성하십시오 :

Updated fiddle.

$('.main-navigation li a').hover(
    function() { 
     if ($('.main-navigation').hasClass('main-nav-pos')) { 
      //display heading and caption 
      $(this).children('.nav-info').animate({"height":"100%"}, 100); 
      $(this).children('.nav-info').animate({"top":"-105%"}, 'fast'); 
      $(this).children('.butterfly').css({"display":"block"}, 'slow'); 
     } 
     else 
     { 
      //display heading and caption 
      $(this).children('.nav-info-fixed').animate({"height":"100%"}, 100); 
      $(this).children('.nav-info-fixed').animate({"top":"105%"}, 'fast'); 
     } 
    }, 
    function() { 
     if ($('.main-navigation').hasClass('main-nav-pos')) { 
      //hide heading and caption 
      $(this).children('.nav-info').animate({"height":"0"}, 100); 
      $(this).children('.nav-info').animate({"top":"0%"}, 'fast'); 
      $(this).children('.butterfly').css({"display":"none"}, 'slow'); 
     } 
     else 
     { 
      //hide heading and caption 
      $(this).children('.nav-info-fixed').animate({"height":"0"}, 100); 
      $(this).children('.nav-info-fixed').animate({"top":"0%"}, 'fast'); 
     } 
    } 
);