jquery悬停问题

当用户将鼠标悬停在导航菜单上的按钮（#home，＃）上时，我正试图将网站徽标（logoName.png）更改为其他图像（logoHome.png，logoEvents.png等）事件等）与下面的脚本。当时间设置为0并且所有事情都是瞬间发生的时候，这可以正常工作，但是当我放慢速度时，它并没有达到我想要的效果。jquery悬停问题

如果用户在悬停动画完成之前将鼠标移离按钮，则它不会恢复到徽标，并且如果用户直接在不同的导航按钮之间移动，则会显示徽标而不是导航鼠标现在在按钮上的图像。

我试过使用悬停，mouseenter/leave和mouseover/out无济于事。有什么方法可以更好地处理队列吗？或者我应该试试hoverIntent吗？

所有建议表示赞赏 - 我是新来的这一切！谢谢。

$('#home').hover(function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image 
     }); 
}, function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
     }); 
}); 

$('#events').hover(function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoEvents.png').fadeIn(500); //swaps logo for events image 
     }); 
}, function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
     }); 
});

编辑： - 工作版本的人谁的兴趣：

$('#home').hover(function() { 
    $('#logo').stop(true, true).fadeOut(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image 
     }); 
    }, function() { 
$('#logo').stop(true, true).fadeOut(
    500, 
    function() { 
     $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
    }); 
});

等

感谢您的帮助。

来源

2010-01-20 Mike

这是一个重复的（它相当经常出现）。例如（和答案！）请参阅：http://stackoverflow.com/questions/2009151/jquery-hover-event-not-working-properly/2009198#2009198。 – 2010-01-20 21:38:42

谢谢 - 我在发布之前浏览了一下但未遇到此问题。 – Mike 2010-01-20 22:34:39

万一任何人读到这一点：尝试使用.prop而不是.attr ;-) – juFo 2016-12-07 07:30:17

你有没有尝试过没有回调？

$('#home').hover(function() { 
    $('#logo').fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500); 
}, function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
}); 

$('#events').hover(function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500); 
}, function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
});

另一种选择是新的jQuery功能.clearQueue()

来源

2010-01-20 21:36:01 munch

感谢您的建议，但没有回调它改变图像之前，它做了第一个fadeOut。现在解决使用.stop（）和.clearQueue（）似乎也可以工作。 jquery网站上说.stop（）仅用于动画，而.clearQueue（）更通用，所以看到我有动画和源代码更改后，.clearQueue（）会更“正确”吗？ – Mike 2010-01-20 22:27:35

这里没有真正的“更多”正确。这取决于你想要做什么。 'stop（）'会暂停当前动画。 'clearQueue（）'和'stop（true，true）'会做同样的事情并从队列中移除所有元素。 '这更多是一个偏好的问题，所以如果你使用停止，只需停下来。 – munch 2010-01-20 23:08:20

尝试使用.stop（）方法来中断之前的宽松

$('#home').hover(function() { 
    $('#logo').stop().fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500); 
}, function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
}); 

$('#events').hover(function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500); 
}, function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
});

来源

2010-01-20 21:36:19 vitto

谢谢 - .stop（）似乎有诀窍，但为了获得正确的源代码更改和淡入仍然需要在回调函数中。 – Mike 2010-01-20 22:29:44

jquery悬停问题

回答

相关问题