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/
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
$(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);
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With