Я действительно новичок в 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>
Оцените любую помощь или совет. Благодарю.
g
каждый раз, когда элемент перемещается.% 360
«сбрасывает»g
в ноль, если достигается максимум дляhue
(который изменяется от 0 до 360). Если вы наведите достаточное количество элементов на скрипке, вы увидите, что цвет постепенно исчезает с красного на зеленый и так далее ...