2012-03-15 136 views
1

我試圖讓鼠標懸停在圖像旁邊時出現一個搜索欄,並將鼠標懸停在圖像旁邊時消失。我已經基本上得到它的工作,但它的行爲真的很糟糕。很難以書面形式解釋它的行爲,但你可以看到我在這裏討論的內容: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); 
}); 

回答

1

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

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

+0

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

+0

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