超链接颜色褪色注册太多鼠标悬停
超链接颜色褪色注册太多鼠标悬停
提问于 2011-09-01 08:44:20
我有一个jQuery srcipt，当你将鼠标放在一个超链接上时，它可以制作一个漂亮的颜色渐变动画。颜色逐渐变红，并逐渐恢复到原来的状态。
/* Hyperlink colour fade animation */
jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
color: '#67C',
duration: 250
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};我遇到的问题是，每一次鼠标悬停都会被记录下来，并且每次迭代都会运行效果。因此，如果你将鼠标悬停在链接上20次，链接就会动画20次，这看起来真的很傻。
有没有办法限制给定时间内的动画数量。比方说，在3-5秒的时间内，它只会褪色一次，而不管鼠标悬停的次数有多少。
谢谢你们！
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-09-01 08:52:13
如果在开始动画之前执行.stop(true, true)，则应停止当前动画，清除动画队列，并过渡到当前动画的末尾。这样的更改应该可以解决您的问题：
$(this).stop(true, true).animate({ color: settings.color },settings.duration);Stack Overflow用户
发布于 2011-09-01 08:49:37
您可以使用is(":animated")方法检查元素是否正在进行动画处理。如果元素是动画元素，则返回true，否则返回‘`false’。希望这能有所帮助。
jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
color: '#67C',
duration: 250
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() {
if(!$(this).is(":animated")){
$(this).animate({ color: settings.color },settings.duration);
}
});
$(this).mouseout(function() {
if(!$(this).is(":animated")){
$(this).animate({ color: original },settings.duration); });
}
});
};Stack Overflow用户
发布于 2011-09-01 08:56:22
不，不，不。这里的问题是您使用了错误的事件。不要使用mouseover和mouseout！使用mouseenter和mouseleave。
有关用法，请参阅此链接：
http://api.jquery.com/mouseenter/ http://api.jquery.com/mouseleave/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7265061
复制相关文章
相似问题
腾讯云开发者
