jQuery的鼠標懸停效果錯誤，鼠標懸停事件總是在鼠標懸停觸發幾次

我有一個簡單的畫廊網格與嵌套跨度顯示標題，我想滑過鼠標，並隱藏在鼠標。jQuery的鼠標懸停效果錯誤，鼠標懸停事件總是在鼠標懸停觸發幾次

一切工作正常，除非鼠標向下移動到標題所在的位置，並且/或者從平鋪底部將平鋪的平鋪展開，那麼懸停效果將無法控制地重複幾次。

起初我以爲這可能是因爲跨度被包含在懸停觸發器的錨點中，但移出它也不起作用。

任何想法？

演示是在這裏：http://www.winterealm.com/gallery/

標記：

<div class="gallery_container"> 
    <ul> 
     <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li> 
     <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li> 
     <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li> 
     <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li> 
     <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li> 
     <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li> 
    </ul> 
</div>

這裏是jQuery的

$(document).ready(function(){ 
    $('.gallery_container a').mouseover(function(){ 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200); 
    }); 

    $('.gallery_container a').mouseout(function(){ 
     $(this).children('.title').animate({ 
      opacity: 0, 
      bottom: -30 
     },200); 
    }); 
});

來源

2011-08-24 Winterain

這裏的問題在於，每當鼠標移過元素或子元素時，mouseover都會觸發。嘗試使用mouseenter和mouseleave事件。

來源

2011-08-24 06:16:14 Coomie

是的，最短的解決方案=最好的！這似乎是這樣做的方式！非常感謝！ – Winterain

所以，你可能想實現一個非常簡單的鎖定機制，如：

var fCurrentlyMoving = false;  
$('.gallery_container a').mouseover(function(){ 
    if (!fCurrentlyMoving) { 
     fCurrentlyMoving = true; 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200, function() { 
      fCurrentlyMoving = false; 
     }); 
    } 
});

它不是氣密的競賽條件明智的，但它不需要。

來源

2011-08-24 06:12:16

試試這個。

$(document).ready(function() { 
$('.gallery_container a').hover(function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 100, 
     bottom: 0 
    }, 200); 
}, function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 0, 
     bottom: -30 
    }, 200); 
}); 
});

你可以在這裏看到一個現場演示。 - http://jsfiddle.net/8Hd7s/

來源

2011-08-24 06:15:58

這也適用，但有輕微的微動，可以在快速將鼠標移動到整行時阻止幻燈片播放動畫。當你不希望每件事物都通過動畫時，它是有利的......感謝解決方案！ – Winterain

根據你原來的問題，我認爲這就是你想避免的。您可以簡單地通過在動畫函數之前移除.stop（）來改變它。 –

嗨@AustinBrunkhorst你可以請這個幫助：http://stackoverflow.com/questions/31835128/jquery-onmouseover-selection-attribute/31835344#31835344 –

jQuery的鼠標懸停效果錯誤，鼠標懸停事件總是在鼠標懸停觸發幾次

回答

相關問題