FONT COLOR ANIMATION

BACKGROUND COLOR ANIMATION

CLICK ME!

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.color.js"></script>
<script>
	$(window).load(function(){
		$('#colorDemo01').hover(function(){
			$('#colorDemo01').stop(true, true).animate({color: '#3c948b'}, {duration:1000});
		}, function(){
			$('#colorDemo01').stop(true, true).animate({color: '#8c0000'}, {duration:1000});
		});
		
		$('#colorDemo02').hover(function(){
			$('#colorDemo02').stop(true, true).animate({backgroundColor: '#658193'}, {duration:1000});
		}, function(){
			$('#colorDemo02').stop(true, true).animate({backgroundColor: '#ecd16f'}, {duration:1000});
		});
		
		var _flg = false;
		var $this;
		$('#colorDemo03').on('click', function(){
			if(_flg) return;
			_flg = true;
			$this = $(this);
			var _pos = $this.data('pos');
			switch(_pos) {
				case 0:
					$this.animate({right: '780px', backgroundColor: '#8c0000', color: '#fff'}, {duration:1000, complete: colorCompleteFunc(_pos)});
					break;
				case 1:
					$this.animate({bottom: '400px', backgroundColor: '#ecd16f', color: '#658193'}, {duration:1000, complete: colorCompleteFunc(_pos)});
					break;
				case 2:
					$this.animate({right: '0', backgroundColor: '#3c948b', color: '#ffffff'}, {duration:1000, complete: colorCompleteFunc(_pos)});
					break;
				case 3:
					$this.animate({bottom: '0', backgroundColor: '#ffffff', color: '#888888'}, {duration:1000, complete: colorCompleteFunc(_pos)});
					break;
			}
			
		});
		
		function colorCompleteFunc(_pos) {
			_flg = false;
			_pos >= 3 ? _pos = 0 : _pos++;
			$this.data('pos', _pos);
		}
	});
</script>
<p id="colorDemo01">FONT COLOR ANIMATION</p>

<div id="colorDemo02">
	<p>BACKGROUND COLOR ANIMATION</p>
</div>

<div id="colorDemo03" data-pos="0">
	<p>CLICK ME!</p>
</div>

colorについて

jquery-colorは、jQueryのanimateメソッドでは実現できない色のアニメーションを可能にするカラフルなプラグイン。
マウスオーバーで色を変化させるのも、インクルードしといて使わないのもあなたの自由!
ダウンロード こちら
ドキュメント こちら
デモ デモページはありません
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FlipOutCards

    FlipOutCards

    複数の要素をフリップアニメーションで表示できる

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる

  • Flip

    Flip

    Flipは、フリップアニメーションを簡単に実装できる

  • Circulate

    Circulate

    Circulateは、要素をサークル状に回転させることができる

  • shapeshift

    shapeshift

    不揃いな要素をできるだけ隙間がなくなるように敷き詰めてくれる