I have a simple gallery grid with a nested span that shows the title, which I want to slide up on mouse over, and hide on mouse out.
我有一个简单的图库网格,嵌套的跨度显示标题,我想在鼠标上滑动,然后隐藏在鼠标上。
Everything works fine, except whenever the mouse moves down to where the title is and/or hovers out of the tile from the bottom of the tile, then the hover effect repeats a few times uncontrollably.
一切都运行良好,除了当鼠标移动到标题所在的位置和/或从瓦片底部悬停在瓦片上时,悬停效果会不受控制地重复几次。
At first I thought it might be because the span is contained within the anchor which is the hover trigger, but moving it out didn't work either.
一开始我认为这可能是因为张成的空间包含在锚定中,锚定是悬停触发器,但把它移出去也不管用。
Any ideas ?
什么好主意吗?
The demo is here : http://www.winterealm.com/gallery/
演示在这里:http://www.winterealm.com/gallery/
Markup:
标记:
<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>
Here's the jquery
这是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);
});
});
3 个解决方案
#1
8
The problem here is that mouseover fires every time the mouse moves over the element or child elements. Try using the mouseenter and mouseleave events instead.
这里的问题是,每当鼠标移动元素或子元素时,鼠标悬停就会触发。尝试使用mouseenter和mouseleave事件代替。
#2
3
Try this.
试试这个。
$(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);
});
});
You can see a live demo here. - http://jsfiddle.net/8Hd7s/
你可以在这里看到一个现场演示。——http://jsfiddle.net/8Hd7s/
#3
0
So you may want to implement a really simple locking mechanism, as in:
所以你可能想要实现一个非常简单的锁定机制,如:
var fCurrentlyMoving = false;
$('.gallery_container a').mouseover(function(){
if (!fCurrentlyMoving) {
fCurrentlyMoving = true;
$(this).children('.title').animate({
opacity: 100,
bottom: 0
},200, function() {
fCurrentlyMoving = false;
});
}
});
it's not airtight race-condition-wise, but it doesn't need to be.
这不是无懈可击的比赛,但也不需要这样。
#1
8
The problem here is that mouseover fires every time the mouse moves over the element or child elements. Try using the mouseenter and mouseleave events instead.
这里的问题是,每当鼠标移动元素或子元素时,鼠标悬停就会触发。尝试使用mouseenter和mouseleave事件代替。
#2
3
Try this.
试试这个。
$(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);
});
});
You can see a live demo here. - http://jsfiddle.net/8Hd7s/
你可以在这里看到一个现场演示。——http://jsfiddle.net/8Hd7s/
#3
0
So you may want to implement a really simple locking mechanism, as in:
所以你可能想要实现一个非常简单的锁定机制,如:
var fCurrentlyMoving = false;
$('.gallery_container a').mouseover(function(){
if (!fCurrentlyMoving) {
fCurrentlyMoving = true;
$(this).children('.title').animate({
opacity: 100,
bottom: 0
},200, function() {
fCurrentlyMoving = false;
});
}
});
it's not airtight race-condition-wise, but it doesn't need to be.
这不是无懈可击的比赛,但也不需要这样。