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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.transit.js"></script>
<script>
	$(window).load(function(){
		var _timer;
		if(chkInLightBox()) {
			$('#cboxLoadedContent').css('cssText', 'overflow-x: hidden!important;');
			initLightBoxDisabled(function(){
				clearTimeout(_timer);
			});
		}
		$('#transitDemoBtn01').on('click', function(){
			$(this).prop('disabled', true);
			$('#transitDemoBtn01').transition({rotate:-20},100,function(){
				$('#transitDemo01').transition({y:118}, 1000, 'out');
				$('#transitDemo03').transition({x:-470}, 1900);
				_timer = setTimeout(transitDemoStep2, 850);
			});
		});
			
		function transitDemoStep2() {
			$('#transitDemo02').transition({y:95,rotate: -2300}, 1000);
			_timer = setTimeout(transitDemoStep3, 870);
		}
		function transitDemoStep3() {
			$('#transitDemo03').hide();
			$('#transitDemo04').show().transition({x:300,y:-300},500, 'ease');
			_timer = setTimeout(transitDemoStep4, 330);
		}
		function transitDemoStep4() {
			$('#transitDemo05').transition({x:290},400);
			_timer = setTimeout(transitDemoStep5, 130);
		}
		function transitDemoStep5() {
			_timer = setTimeout(transitDemoStep6, 1650);
			$('#transitDemo06').css({transformOrigin:'100% 50%'}).transition({scaleX:0.1},300, function(){
				$this = $(this);
				setTimeout(function(){
					$this.transition({y:3000},1000, 'easeInQuad', function(){
						$this.css('background-color', 'transparent').transition({scaleX:1,width:200},100);
						$this.append('<button id="transitDemoBtn02" class="blue">もう一回</button>');
						$('#transitDemoBtn02').one('click', function(){
							$('#transitDemoBtn01').prop('disabled', false);
							$('#transit .transit-demo, .hatena, #transitDemoBtn01').removeAttr('style');
							location.href = '#transitDemoBtn01';
							$this.empty();
							$this.removeData('transform');
						});		
					});
				}, 1000);
			})
		}
		function transitDemoStep6() {
			$('.hatena').transition({y:2692}, 500, 'easeInQuad');
		}
	});
</script>
<button id="transitDemoBtn01" class="red">ピタゴラスイッチ!</button>

<div id="transitDemo01" class="transit-demo"></div>
<div id="transitDemo02" class="transit-demo"></div>
<div id="transitDemo03" class="transit-demo"></div>
<div id="transitDemo04" class="transit-demo"></div>
<div id="transitDemo05" class="transit-demo"></div>
<div id="transitDemo06" class="transit-demo"></div>

transitについて

transitは、animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使えるプラグインです。
コールバック関数などもセットできるので、transitionアニメーションをサポートしているブラウザにはぜひ使いたいプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • oriDomi

    oriDomi

    画像に折り目のついた紙のような動きを与える

  • Circulate

    Circulate

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

  • gridly

    gridly

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

  • Vague

    Vague

    Vagueは、要素にブラーアニメーションをセットできる

  • Sticker

    Sticker

    Stickerは、壁に貼ったステッカーを剥がすような動きを表現できる