jQuery - 使用懸停動畫閃爍（）

我有一個設置，如此question中所述，它完美的作品。基本上，當您將鼠標移動到下拉菜單上時，下拉菜單會增加，以顯示更多選項。jQuery - 使用懸停動畫閃爍（）

然而，有一個小問題。如果將鼠標移動到#dropdown格之外，然後再次快速返回，它會不斷激發mouseenter和mouseleave事件，從而導致永無止境的閃爍循環。我怎樣才能解決它？

這裏是我當前的jQuery代碼

$("#dropdown").hover(function() { 
     $(this).stop(true,true).fadeTo('fast',1); 
     $("#options").stop(true,true).slideDown(); 
    }, function() { 
     $(this).stop(true,true).fadeTo('fast',0.1); 
     $("#options").stop(true,true).slideUp(); 
    } 
);

而且當前的HTML代碼

<div id="dropdown"> 
    <div id="optionsPeek">Options</div> 
    <div id="options"> 
     <!-- Links here --> 
    </div> 
</div>

dropdown是默認值（10％的不透明度）可見，optionspeek始終可見，一旦你在它懸停， options div滑落，其中的鏈接變得可見。

來源

2010-05-18 Chris

你能發佈html標記嗎？我猜＃'選項'不在'＃下拉菜單內？ – 2010-05-18 15:46:02

如果在淡出中添加delay()會怎樣？例如1-2秒。這樣，您可以將鼠標移開並移回下拉菜單而不會導致任何動畫。

http://api.jquery.com/delay/

來源

2010-05-18 15:47:58 Alec

這看起來不錯，但不幸的是，它似乎並沒有與'停止（）'工作 – Chris 2010-05-19 14:22:59

我得到了這個工作完美，現在看起來不錯，謝謝 – Chris 2010-05-21 10:49:58

我發現處理這些問題的最佳方式是使用HoverIntent插件。它旨在防止您遇到的閃爍問題。

來源

2010-05-18 15:47:05 GSto

我似乎並沒有越來越你提到的閃爍，但隨後又 - 我沒有創建標記，因爲你不可用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#dropdown").hover(function() { 
     $(this).stop(true,true).fadeTo('fast',1); 
     $("#options").stop(true,true).slideDown(); 
    }, function() { 
     $(this).stop(true,true).fadeTo('fast',0.1); 
     $("#options").stop(true,true).slideUp(); 
    } 
); 
}); 
</script> 
</head> 
<body> 
<div id="dropdown" style="width: 300px; height: 150px; border: 1px solid black;">DROPDOWN</div> 
<div id="options" style="width: 300px; height: 150px; border: 1px solid black;">OPTIONS</div> 

</body> 
</html>

來源

2010-05-18 15:52:20

使用：

溢出：隱藏;

來源

2010-08-03 11:18:21 josh

jQuery - 使用懸停動畫閃爍（）

回答

相關問題