JQueryのアニメーションとマウスのホバー

Question

私は、あなたの上にマウスを置くと画像の横に検索バーを表示しようとしています。画像の横にマウスを置くと消えます。私は基本的にそれを働かせましたが、それは本当に不器用です。それがどのように動作しているかを書面で説明するのは難しいですが、私がここで話していることを見ることができます：http://thecampusbubble.com/redesign/sandbox/problem.php。私は問題の大きな部分は、あなたが1つの画像上にマウスを置いたときに、検索バーが完全に現れる前に素早く次の画像に行くときに起こると思います。ここで

は私のコードです：

<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> 

スクリプト：

$('#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

私は問題はあなたが私が思うqueues

を使用してみたいことが何であるかを理解している場合別の要素にカーソルを移動すると、アニメーションをすぐに停止したいnt。あなたは.clearQueueを使ってそれを行うことができます