jquery为.addClass添加淡入淡出
如何淡入淡出.addClass。
链接在这里 –
http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html
这是代码 –
$(document).ready(function() { $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() { $(this).addClass('pretty-hover'); }, function() { $(this).removeClass('pretty-hover'); }); }); $(document).ready(function() { $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() { $(this).addClass('pretty-hover_01'); }, function() { $(this).removeClass('pretty-hover_01'); }); });
谢谢
如果jQuery UI是一个选项,您可以使用.toggleClass(class, duration)
。
此外,您可以简化您的选择器,它看起来像:even
和:odd
将根据您当前的选择器执行该作业,如下所示:
$(function() { $('#menu li:even').hover(function() { $(this).toggleClass('pretty-hover', 500); }); $('#menu li:odd').hover(function() { $(this).toggleClass('pretty-hover_01', 500); }); });
我意识到上面似乎是倒退,但是:even
选择第一个元素,因为它基于0,所以甚至选择0,2,4等。我希望你会同意,让它更容易维护:)
根据评论进行编辑 – 由于.toggleclass()
坚持快速hover,这里有一个可以按预期工作的替代方案,只是更长一点:
$('#menu li.post:even').hover(function() { $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500); }, function() { $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500); }); $('#menu li.post:odd').hover(function() { $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500); }, function() { $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500); });
如果你想淡化元素的颜色,你需要使用jQuery UI ,它对衰落和动画有更高级的支持(核心jQuery只能淡化/动画整数属性:颜色不起作用)。
它甚至支持动画整个CSS类中的所有属性,因此使用jQuery UI,您应该能够实现所需的效果。
jQuery .animate函数是最好的选择,虽然这不会让你在CSS类之间制作动画 – 你必须指定各个样式。
你可以更好地使用jQquery UI,因为这将提供这种function,如jQuery animate页面中所述:
jQuery UI项目通过允许对颜色等非数字样式进行动画处理来扩展.animate()方法。 该项目还包括通过CSS类而不是单个属性指定动画的机制