ошибка эффекта наведения мыши jQuery, событие mouseover всегда срабатывает несколько раз при mouseout
у меня есть простая сетка галереи с вложенным промежутком, который показывает заголовок, который я хочу сдвинуть на мышь и скрыть на мыши.
все работает нормально, за исключением случаев, когда мышь перемещается вниз, где находится заголовок и / или зависает из плитки снизу плитки, тогда эффект наведения повторяется несколько раз неконтролируемо.
сначала я подумал, что это может быть потому, что промежуток содержится в Якоре, который является триггером наведения, но движется это тоже не сработало.
какие идеи ?
демо здесь: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);
});
});
3 ответов
проблема здесь в том, что mouseover срабатывает каждый раз, когда мышь перемещается по элементу или дочерним элементам. Вместо этого попробуйте использовать события mouseenter и mouseleave.
попробуйте это.
$(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/
таким образом, вы можете реализовать действительно простой механизм блокировки, как в:
var fCurrentlyMoving = false;
$('.gallery_container a').mouseover(function(){
if (!fCurrentlyMoving) {
fCurrentlyMoving = true;
$(this).children('.title').animate({
opacity: 100,
bottom: 0
},200, function() {
fCurrentlyMoving = false;
});
}
});
это не воздухонепроницаемое состояние гонки, но это не обязательно.