HSL случайный цвет, применяя его к функции

Question

HSL случайный цвет, применяя его к функции

0

Я действительно новичок в jquery и стараюсь, чтобы он был таким, что цвет, созданный для мигания слова, всегда будет различным цветом каждый раз, но не может понять, как это сделать. Посмотрите мой код ниже или посмотрите jsfiddle.

http://jsfiddle.net/schan01/2d8Rr/

<!doctype html>
<html>
<head>
    <style>

        html{
            height:100%;
            overflow:hidden;
        }

        p{
            font-family: "Helvetica";
            font-size: 10px;
            float:left;
            margin:10px;

        }


        .box {
            width: 10px;
            height: 10px;    
            float:left;
            margin:10px;
        }



        .hovered{
            color: blue;

            -webkit-animation-name: blinker;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;

            -moz-animation-name: blinker;
            -moz-animation-duration: 1s;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;

            animation-name: blinker;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }

        @-moz-keyframes blinker {  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
        }

        @-webkit-keyframes blinker {  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
        }

        @keyframes blinker {  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
        }




    </style>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        var g = 0;


        $(function() {

            for(var i=0; i<1000; i++){
                            $("body").append("<p>blink</p>");
                        }

            $("p").hover(function() {
                //hovered on
                $(this).addClass("hovered")({
                    "color":"hsl(" + g + ",100%,50%)"
                });

        });

    });

    </script>
</head>

<body>

</body>

</html>

Оцените любую помощь или совет. Благодарю.

user3453264 23 март 2014, в 22:47

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Andreas · Accepted Answer · 2014-03-23T19-46-00.000Z

Вы пропустили вызов .css() после .addClass()

$(this).addClass("hovered").css({
    "color": "hsl(" + g + ",100%,50%)"
});

играть на скрипке

офигенно :) спасибо большое. быстро qn, вы также добавили это g = (g + 1)% 360; что это делает? Спасибо
Он просто добавляет 1 к значению g каждый раз, когда элемент перемещается. % 360 «сбрасывает» g в ноль, если достигается максимум для hue (который изменяется от 0 до 360). Если вы наведите достаточное количество элементов на скрипке, вы увидите, что цвет постепенно исчезает с красного на зеленый и так далее ...