Ошибка при наведении мыши на jquery, событие mouseover всегда срабатывает несколько раз при наведении мыши - PullRequest
Новая
       58

Ошибка при наведении мыши на jquery, событие mouseover всегда срабатывает несколько раз при наведении мыши

6 голосов
/ 24 августа 2011

У меня есть простая сетка галереи с вложенным интервалом, который показывает заголовок, который я хочу скользить вверх при наведении курсора мыши и скрывать при наведении мыши.

Все работает нормально, кроме случаев, когда мышь перемещается внизтам, где заголовок находится и / или зависает над плиткой от нижней части плитки, тогда эффект наведения повторяется несколько раз неудержимо.

Сначала я подумал, что это может быть из-за того, что промежуток содержится в якоре, который является триггером наведения, но его перемещение тоже не сработало.

Есть идеи?

Демо здесь: 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 ]

8 голосов
/ 24 августа 2011

Проблема здесь в том, что указатель мыши срабатывает каждый раз, когда мышь перемещается над элементом или дочерними элементами.Попробуйте вместо этого использовать события mouseenter и mouseleave.

4 голосов
/ 24 августа 2011

Попробуйте это. 

$(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 голосов
/ 24 августа 2011

Таким образом, вы можете захотеть реализовать действительно простой механизм блокировки, например: 

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

Это не воздухонепроницаемое состояние гонки, но это не обязательно.

...