JQuery動畫和鼠標懸停

我試圖讓鼠標懸停在圖像旁邊時出現一個搜索欄，並將鼠標懸停在圖像旁邊時消失。我已經基本上得到它的工作，但它的行爲真的很糟糕。很難以書面形式解釋它的行爲，但你可以看到我在這裏討論的內容：http://thecampusbubble.com/redesign/sandbox/problem.php。我認爲當您將鼠標懸停在一張圖片上時，會出現很大一部分問題，然後在搜索欄完全出現之前快速轉到下一張圖片。JQuery動畫和鼠標懸停

這裏是我的代碼：

<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); 
});

來源

2012-03-15 user1270558

如果我已經明白是什麼問題，你可能想使用queues

我想試試你想要一個動畫在你徘徊到另一個元素時立即停止NT。你可以使用.clearQueue

來源

2012-03-15 03:09:40

工作，謝謝！我沒有足夠的代表來投票給你，但那正是我所需要的。 – user1270558 2012-03-15 03:29:13

@ user1270558，爲你做了... +1 – gdoron 2012-03-15 05:54:53

JQuery動畫和鼠標懸停

回答

相關問題