我正在努力使span class =" term-name"以变化backgroundColor的方式动画,从一组预定义的颜色/ hex
中随机变换这是HTML标记。
<ul id="filter" class="group">
<li>
<a class="art-direction" href="#" title="View all items filed under Art Direction">
<span class="term-name">Art Direction</span>
<!-- START .term-count -->
<span class="term-count">4<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="brand-strategy" href="#" title="View all items filed under Brand Strategy">
<span class="term-name">Brand Strategy</span>
<!-- START .term-count -->
<span class="term-count">2<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="communication-2" href="#" title="View all items filed under Communication">
<span class="term-name">Communication</span>
<!-- START .term-count -->
<span class="term-count">5<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="design-collaboration" href="#" title="View all items filed under Design Collaboration">
<span class="term-name">Design Collaboration</span>
<!-- START .term-count -->
<span class="term-count">2<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
</ul>
这是我制作的JS代码,它不起作用。当我将它悬停时,它应该为跨度添加随机背景颜色。
$( '#filter a' ).hover( function() {
//Store available css classes
var classes = new Array("green", "purple", "teal", "violet", "pink");
//Give a random class index
var randomIndex = Math.floor(Math.random()*classes.length);
$(this).find( '.term-name' ).stop().animate({ backgroundColor: 'classes[randomNumber]',}, 500, 'easeInOutExpo');
}, function() {
//return to original
$(this).find( '.term-name' ).stop().animate({ backgroundColor: 'white',}, 500, 'easeInOutExpo')";
});
它的灵感来自JS代码(http://jsfiddle.net/GNgjZ/290/)
顺便说一下,您可以观察到该链接由2个跨度(术语名称和术语计数)组成
<a><span class="term-name"></span><span class="term-count"></span></a>
术语计数也有动画工作,它正在工作,这里是JS:
$( '.term-count' ).each( function() {
$(this).css( 'marginLeft', '-' + Math.round( ($(this).outerWidth() / 2) ) + 'px' );
});
$( '#filter a' ).hover( function() {
$(this).find( '.term-count' ).stop().animate({ marginBottom: '8px', opacity: 1 }, 500, 'easeInOutExpo');
}, function() {
$(this).find( '.term-count' ).stop().animate({ marginBottom: 0, opacity: 0 }, 500, 'easeInOutExpo');
});
谢谢,希望我的JS现在可以使用。
答案 0 :(得分:1)
根据Jquery API,&#34;除非如下所述,否则所有动画属性都应设置为单个数值。大多数非数字属性都无法使用基本的jQuery功能进行动画处理(例如,宽度,高度或左边可以设置动画,但背景颜色不能,除非使用了jQuery.Color()插件)&#34;。除此之外,您的代码还有其他一些问题。
答案 1 :(得分:1)
这FIDDLE会让你有个好的开始。您的代码有很多问题,例如变量引号,额外的分号和括号。我建议您在加载页面并测试javascript时观察控制台。它告诉了你很多。密切关注小提琴,如果您有任何疑问,请告诉我。希望这会有所帮助。
var classes = ["#1ace84", "#a262c0", "#4ac0aa", "#8c78ba", "#d529cd"];
$( '#filter a' ).hover( function(e) {
//Give a random class index
var randomIndex = Math.floor(Math.random()*classes.length);
$(e.currentTarget).find( '.term-name' ).css( "backgroundColor", classes[randomIndex]);
}, function(e) {
//return to original
$(e.currentTarget).find( '.term-name' ).css( "backgroundColor", 'white');
});