Форум

mixnet · #1 (**permalink**) 28.11.2014, 22:28

ребят помогите разобраться, вставил плагин jQuery.Color() получилась плавное переливания цвета, только цвет зацикливается, получается например 1. цвет зеленый потом синий потом красный и опять по новой идет зеленый, синий и красный... а как сделать чтоб было так, идет зеленый затем синий, потом красный и остается на красном цвете?

Код:

	
<script>
	// Rainbow animation
(function animate() {
    var block = $('#c1');
    block.animate({backgroundColor: $.Color(block.css('backgroundColor')).hue('+=179')}, 9000, animate);
})();
</script>

вот плагин сам jquery.color.js

http://www.xiper.net/examples/js-plu...query.color.js

рони · #2 (**permalink**) 29.11.2014, 16:38

mixnet,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #c1{
    height: 50px;
    background-color: #FFFF33;
    display: inline-block;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
  <script>
     $(function(){
     var arr = ['#008000','#0000FF','#FF0000'],block = $('#c1');
(function animate() {
    if(!arr.length) return;
    block.animate({backgroundColor: arr.shift()}, 9000, animate);
})();

});
  </script>
</head>

<body>
<span id="c1" >Информация</span>
</body>
</html>

danik.js · #3 (**permalink**) 29.11.2014, 17:03

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #c1{
    height: 50px;
    background-color: #FFFF33;
    display: inline-block;
    animation: colors 3s forwards;
  }
@keyframes colors{
    33%{
        background-color: #008000;
    }
    66%{
        background-color: #0000FF;
    }
    100%{
        background-color: #FF0000;
    }
}
 
  </style>
</head>
 
<body>
<span id="c1" >Информация</span>
</body>
</html>

mixnet · #4 (**permalink**) 29.11.2014, 21:38

ребят спасибо огромное выручили)

Форум

Справочник

Discord чат

Курсы javascript