как предотвратить исчезновение эффекта наведения мыши после отпускания мыши - PullRequest
Новая
       22

как предотвратить исчезновение эффекта наведения мыши после отпускания мыши

0 голосов
/ 30 июля 2011

Я пытаюсь навести курсор мыши и показать эффект большого пальца, это пример кода: 

<ul>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li> 
   <img class="img" src="http://jsfiddle.net/img/logo.png" style="display:none">
</ul>

Js скрипт: 

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).fadeIn();
},
  function(e){
    $('.img').hide();
});

демо можно посмотреть здесь: http://jsfiddle.net/8zG2Q/2/,

проблема в том, что при наведении мыши на элемент быстро изображение не скрывается после того, как мышь покидает все элементы. Я попытался использовать show () вместо fadeIn (), но это не помогает, потому что я загружаю изображение с сервера, требуется время, чтобы быть видимым.

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

1 Ответ

1 голос
/ 30 июля 2011

Перед вызовом fadeIn() остановите анимацию (при необходимости очистите очередь, а также перейдите к концу анимации), затем спрячьте элемент (сбросив в «базовое состояние»), например: 

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).stop(true,true).hide().fadeIn();
},
  function(e){
    $('.img').hide();
});
...