JQuery 애니메이션 및 마우스 가리개

Question

이미지 위에 마우스를 가져갈 때 이미지 옆에 검색 막대를 표시하려고하고 이미지 옆에 마우스를 올리면 사라집니다. 나는 기본적으로 작동 시키지만 작동은 정말 이상합니다. 서면으로 행동하는 방법을 설명하기는 어렵지만 여기에서 내가 말하는 내용을 볼 수 있습니다 : http://thecampusbubble.com/redesign/sandbox/problem.php. 문제의 큰 부분은 한 이미지 위로 마우스를 가져 가면 검색 창이 완전히 나타나기 전에 다음 이미지로 빠르게 이동하는 것입니다. 여기

내 코드입니다 :

<div class='header'> 
<div class='pageContainer'> 
    <img class='bubbleLogo' src=' ../lib/images/bubbleLogo.png ' /> 
    <div class='iconContainer' id='findContainer'> 
     <div class='headerIcon findIcon' id='find'></div> 
     <div class='searchBar' id='findSearchBar'> 
      <div class='innerBox'>Night Life</div> 
     </div> 
    </div> 
    <div class='iconContainer' id='buzzContainer'> 
     <div class='headerIcon buzzIcon' id='buzz'></div> 
     <div class='searchBar' id='buzzSearchBar'> 
      <div class='innerBox'>Night Life</div> 
     </div> 
    </div> 
    <div class='iconContainer' id='feedContainer'> 
     <div class='headerIcon feedIcon' id='feed'></div> 
     <div class='searchBar' id='feedSearchBar'> 
      <div class='innerBox'>Night Life</div> 
     </div> 
    </div> 
</div> 

스크립트 : 내가 문제가 당신이 queues

내 생각하여 시도 할 수 있습니다 무엇인지 이해 한 경우

$('#find').hover(function(){ 
    $('#findSearchBar').animate({opacity: 100, width: 290}, 500); 
    $('#findContainer').animate({width: 365}, 500); 

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#buzzContainer').animate({width: 79}, 500); 

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#feedContainer').animate({width: 79}, 500); 
}); 
$('#buzz').hover(function(){ 
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#findContainer').animate({width: 79}, 500); 

    $('#buzzSearchBar').animate({opacity: 100, width: 290}, 500); 
    $('#buzzContainer').animate({width: 365}, 500); 

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#feedContainer').animate({width: 79}, 500); 
}); 
$('#feed').hover(function(){ 
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#findContainer').animate({width: 79}, 500); 

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500); 
    $('#buzzContainer').animate({width: 79}, 500); 

    $('#feedSearchBar').animate({opacity: 100, width: 290}, 500); 
    $('#feedContainer').animate({width: 365}, 500); 
}); 
$(document).ready(function(){ 
    $('#buzzSearchBar').animate({ opacity: 0, width: 0 }, 0); 
    $('#feedSearchBar').animate({ opacity: 0, width: 0 }, 0); 
    $('#buzzContainer').animate({ width: 79 }, 0); 
    $('#feedContainer').animate({ width: 79 }, 0); 
}); 

Answer 1

다른 엘레멘트를 가리키면 즉시 애니메이션이 멈추기를 원한다. nt. .clearQueue를 사용하면됩니다.