2011-08-24 195 views
5

我有一个简单的画廊网格与嵌套跨度显示标题,我想滑过鼠标,并隐藏在鼠标。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); 
    }); 
}); 

回答

8

这里的问题在于,每当鼠标移过元素或子元素时,mouseover都会触发。尝试使用mouseenter和mouseleave事件。

+0

是的,最短的解决方案=最好的!这似乎是这样做的方式!非常感谢! – Winterain

0

所以,你可能想实现一个非常简单的锁定机制,如:

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

它不是气密的竞赛条件明智的,但它不需要。

3

试试这个。

$(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/

+0

这也适用,但有轻微的微动,可以在快速将鼠标移动到整行时阻止幻灯片播放动画。当你不希望每件事物都通过动画时,它是有利的......感谢解决方案! – Winterain

+0

根据你原来的问题,我认为这就是你想避免的。您可以简单地通过在动画函数之前移除.stop()来改变它。 –

+0

嗨@AustinBrunkhorst你可以请这个帮助:http://stackoverflow.com/questions/31835128/jquery-onmouseover-selection-attribute/31835344#31835344 –