在链接标记中添加更改span的.animate不起作用

Question

我正试图使span class=的“术语名称”以一种从预定义的颜色/十六进制中随机更改backgroundColor的方式被动画化。

这是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/)的启发。

顺便说一句，正如您所观察到的，链接由两个跨度(术语名称和术语计数)组成。

    <a><span class="term-name"></span><span class="term-count"></span></a>

术语-count也有活力的工作，它正在工作，这里是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现在起作用了。

Answer 1

这个小提琴会给你一个好的开始。您的代码有很多错误，例如变量周围的引号、额外的分号和括号。我建议您在加载页面和测试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');
});

Answer 2

根据Jquery，“所有动画属性都应该被动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的jQuery功能进行动画(例如，宽度、高度或左边可以动画，但是背景色不能动画，除非使用jQuery.Color()插件)”。除此之外，您的代码还存在一些其他问题。