添加更改背景的.animation链接标记内的span颜色不起作用

时间:2014-06-26 02:55:45

标签: javascript jquery html css dom

我正在努力使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现在可以使用。

2 个答案:

答案 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');
});