Question

我正在努力使span class =＆＃34; term-name＆＃34;以变化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现在可以使用。

Answer 1

根据Jquery API，＆＃34;除非如下所述，否则所有动画属性都应设置为单个数值。大多数非数字属性都无法使用基本的jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用了jQuery.Color（）插件）＆＃34;。除此之外，您的代码还有其他一些问题。

Answer 2

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

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

2 个答案: