菜单在鼠标悬停时淡入淡出

<ul style="#" class="hmenu"> 
    <li class="active selected"><a href="#">Home</a></li> 
    <li><a href="#">Facebook</a></li> 
    <li><a href="#">Twitter</a></li> 
</ul>

我有一个菜单，其中一个链接为active。我使用这个脚本来切换悬停菜单在鼠标悬停时淡入淡出

$('.hmenu li').on('mouseenter', function() { 
    $('.hmenu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 
$('.hmenu li').on('mouseleave', function() { 
    $(this).removeClass('active'); 
    $('.hmenu li[class=selected]').addClass('active'); 
});

活动类这项工作的，但我想改变它，这样，当我将鼠标悬停任何一个环节，在鼠标离开链接应该淡入淡出和。

我无法理解这一点 - 我该怎么做？

这里是小提琴：http://jsfiddle.net/GdSUg/

来源

2013-05-21 XTop

你是什么'的链接的意思应该淡入淡出和'..ü的意思是说底色颜色应该淡入淡出..有点困惑.. – bipen

是的..在鼠标上它的背景颜色应该淡入和在mouseleave上它应该淡出 – XTop

添加：

transition: all 1s;

的CSS代码中的类。主动

this is an example

更多信息请参阅参考：Here

来源

2013-05-21 19:32:30

这是否适用于所有浏览器？（提示http://caniuse.com/#feat=css-transitions） –

你忘了在'.hmenu li'上设置'transition'来淡出效果 –

@BenjaminGruenbaum你为什么问你什么时候你已经知道了答案。 '：P' –

CSS转换是一种方法。另一个是使用内置switchClass功能的jQuery UI。 Using your demo：

$('.hmenu li').hover(function() { 
    if (!$(this).hasClass('active')) $(this).switchClass('','active', 200); 
}, function() { 
    $(this).switchClass('active', '', 200); 
});

需要

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

参考：http://jqueryui.com/switchClass/

您可能会注意到怪异的行为时，迅速将鼠标悬停在需要延迟的过渡元素（即 - 褪色，幻灯片） - 考虑使用hoverIntent：

什么是hoverIntent？ hoverIntent是一个插件，试图确定用户的意图...像一个水晶球，只有用鼠标运动！它类似于jQuery的悬停方法。但是，不是立即调用handlerIn函数，而是，hoverIntent等待直到用户的鼠标在拨打电话之前就已经变得足够慢了。为什么？延迟或防止意外触发动画或ajax调用。简单超时适用于小范围，但是如果您的目标范围很大，它可能会执行而不管意图如何。这就是hoverIntent进来......

来源

2013-05-21 19:34:39 Josh

您的解决方案有奇怪的行为....尝试在所有链接上水平和快速移动鼠标 – XTop

这是hover/mouseenter/leave的固有问题并定时淡入淡出。您可以通过编写处理该问题的/ [使用其他代码]（http://cherne.net/brian/resources/jquery.hoverIntent.html）来解决此问题。这不是我的*解决方案，它是一个jQuery解决方案。 :) – Josh

有你去

$('.hmenu li').hover(function() { 
    $(this).animate({ 
     backgroundColor: "#89B908" 
    }, 300); 
}, function() { 
    $(this).animate({ 
     backgroundColor: "#FFF" 
    }, 1); 
});

Fiddle

来源

2013-05-21 19:49:15

但我需要在悬停和选定的li上添加活动类。 – XTop

http://jsfiddle.net/49ef9/这一个做前景色。你可以保留你以前使用的addClass –

@XTop这里http://jsfiddle.net/Exn8v/ –

要动画颜色可靠地使用jQuery，你需要使用JQuery的颜色插件（https://github.com/jquery/jquery-color）。然后，您可以做类似如下：

var active = { 
    backgroundColor: '#89B908', 
    color: '#FFF' 
}, 
inactive = { 
    backgroundColor: '#FFF', 
    color: '#000' 
}; 

$('.hmenu li').on('mouseenter', function() { 
    $(this).animate(active, function() { 
     $('.hmenu li').removeClass('active').css(inactive); 
     $(this).addClass('active').css(active); 
    }).find('a').animate({ 
     color: '#FFF' 
    }); 
}); 
$('.hmenu li').on('mouseleave', function() { 
    $(this).animate(inactive, function() { 
     $(this).removeClass('active'); 
     $('.hmenu li.selected').addClass('active').css(active); 
    }).find('a').animate({ 
     color: '#000' 
    }); 
});

你可以在这里找到工作的jsfiddle：http://jsfiddle.net/GdSUg/28/

来源

2013-05-21 20:06:56

菜单在鼠标悬停时淡入淡出

回答

相关问题