MouseQu и Mouseenter JQuery функции - PullRequest
Новая
       33

MouseQu и Mouseenter JQuery функции

0 голосов
/ 08 ноября 2011

Я использовал функцию jQuery mouseout и mouseenter.Но не работает хорошо.Потому что, когда вы идете быстро по предметам.Я получаю очень сумасшедшие эффекты.Я использовал этот код: 

$('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });

Как я могу исправить мою проблему?

Ответы [ 4 ]

2 голосов
/ 08 ноября 2011

Я добавил в .stop() как раз перед анимацией, которая остановит анимацию и остановит прыжки. 

$('.controlNav li').mouseover(function() {
    $('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
    $('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});
1 голос
/ 08 ноября 2011

Проблема изначально не в событиях mouseout или mouseover. Они работают так, как должны работать. Это означает, что даже если вы наведите курсор мыши на элемент всего на 1ms, он будет работать

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

Вы можете сделать это вручную или просто использовать jQuery hover intent plug , в котором реализовано это очень приятное и простое в использовании.

Лучше не использовать событие mouseout или mouseover и использовать jQuery .hover() (если вы используете плагин .hoverIntent() для более чистого и читаемого кода.

0 голосов
/ 08 ноября 2011

установить некоторую переменную как мьютекс, например: 

var isActive = false;
('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        if(isActive) return false;
        isActivce = true;
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });
0 голосов
/ 08 ноября 2011

.mouseover() и .mouseout() дают странные результаты, потому что mouseover() срабатывает более одного раза, пока ваша мышь все еще находится внутри элемента. Простое движение мыши вызовет его снова и снова.

.mouseenter() и .mouseleave() лучше, потому что они должны срабатывать только один раз при входе или выходе из элемента. Тем не менее, они все еще не функционируют так же хорошо, как .hover(), который объединяет их в один метод.

Также добавление .stop() остановит текущую анимацию перед началом новой. .stop(true, false) очистит что-либо в очереди анимации и не позволит завершить текущую анимацию. 

$('.controlNav li').hover(
    function() {
        $('.hover', this).css({ display: 'block' }).stop(true, false).animate({ top: -73, opacity: 1 }, 450, 'swing' );
},
    function() {
        $('.hover', this).css({ display: 'none' }).stop(true, false).animate({ top: -60, opacity: 0 });
});

http://api.jquery.com/hover/

http://api.jquery.com/stop/

...