Как я могу предотвратить мерцание jquery.hover () других элементов при перемещении мыши между элементами? - PullRequest
Новая
       9

Как я могу предотвратить мерцание jquery.hover () других элементов при перемещении мыши между элементами?

2 голосов
/ 25 января 2012

КОД 

function wkHover(){
$('.worksItem').hover(function() {
        $(this).animate({ top: '-10px' }, 300, 'swing', {queue: false});
        $('.worksItem').not(this).animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
    }, function(){
        $(this).animate({ top: '0' }, 200, 'swing', {queue: false});
        $('.worksItem').animate({ opacity: '1' }, 200, 'swing', {queue: false});
    });
}

http://egegorgulu.com/works

http://jsfiddle.net/vJQEQ/17/

Хорошо, у меня две проблемы:

  1. При наведении курсора на предметы он естественным образом запускает функцию отключения при нахождении над полями, что создает этот неприятный эффект вспышки. То, что я хочу сделать, это просто оживить тех, из которых вывешивают и увлекают, чтобы остальные остались прежними. Есть идеи?

  2. Попробуйте быстро переместить мышь вокруг всех элементов и постарайтесь не приступать к эпилептическому припадку. В любом случае, чтобы предотвратить это?

Ответы [ 2 ]

2 голосов
/ 25 января 2012

Вот рабочая скрипка .Ключ к .stop() анимации перед добавлением новой в очередь: 

$(this).stop(true, true).animate(/***/);

Однако;это вызывает проблемы, потому что одновременно нужно запускать несколько анимаций, поэтому вызов .stop() помешает неправильной анимации.Поэтому разные анимации должны быть помещены в разные анимации queues: 

$(this).stop('jump', true, true).animate({/***/}, {
  queue: 'jump'
});

Если вы используете другую очередь по умолчанию (fx), вам придется .dequeue() их вручную. 

$(this).stop('jump', true, true).animate({/***/}, {
  queue: 'jump'
})
.dequeue('jump');

[Редактировать] Что касается первой проблемы, я думаю, что лучшее решение - .delay() анимация затухания, чтобы дать курсору некоторое время для перехода к следующему блоку.Вот скрипка с включенным: 

$(this).stop('fade', true).delay(300, 'fade').animate({ //***

Это имеет некоторые недостатки, в основном из-за того, что .stop() не отменяет тайм-ауты, которые были установлены .delay().Мое лучшее решение - выбрать между «эффектом вспышки» из первой скрипки или эффектом замедленного появления из второй скрипки.

1 голос
/ 25 января 2012

Вы можете попробовать использовать метод stop, передав 2 аргумента stop(false, true), где первый аргумент - очистить очередь или нет, а второй - перейти к концу текущей анимации. Попробуйте это. 

$('.worksItem').hover(function() {
    $(this).stop(false, true)
    .animate({ top: '-10px' }, 300, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
}, function(){
    $(this).stop(false, true)
    .animate({ top: '0' }, 200, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '1' }, 200, 'swing', {queue: false});
});
...