イージング無し

イージング有り(jquery.easing.jsが必要)

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/easing.js"></script>
<script>
	$(window).load(function(){
		$('.box_container').hover(function(){
			var width = $(this).outerWidth() / 2;
			$(this).find('.left').animate({ right : width },{queue:false,duration:300});
			$(this).find('.right').animate({ left : width },{queue:false,duration:300});
		}, function(){
			$(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
		});
	
		//FOR EASING EFFECT - NOT NEEDED
		$('.box_container2').hover(function(){
	
			var width = $(this).outerWidth() / 2;
	
			$(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
			$(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
		}, function(){	
			$(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
			$(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});	
		});
	});
</script>
<p>イージング無し</p>
<div class="box_container">
        <div class="images_holder clearfix">
			<div class="image_div left"><img class="box_image" src="<PATH>/img11.jpg"/></div>
            <div class="image_div right"><img class="box_image" src="<PATH>/img11.jpg"/></div>        
        </div>
</div>

<p>イージング有り(jquery.easing.jsが必要)</p>
<div class="box_container2">
	<div class="images_holder2 clearfix">
		<div class="image_div left2"><img class="box_image2" src="<PATH>/img15.jpg"/></div>
		<div class="image_div right2"><img class="box_image2" src="<PATH>/img15.jpg"/></div>
	</div>
</div>

DualSlidingDoorについて

DualSlidingDoorは、画像にマウスオーバーすると、自動ドアが開くようなアクションを設定できます。
まぁこれくらなら自前で書けるかも...
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • lake

    lake

    canvasタグを利用して景色を反射した湖面を再現

  • galleryFocus

    galleryFocus

    マウスオーバーした部分の画像周辺のみをはっきりと表示させる

  • puffy

    puffy

    画像が飛び出すようなアニメーションを付けることができる

  • SPOILERALERT

    SPOILERALERT

    、画像や文字をぼかしたりマウスオーバーやクリックでそのぼかしを解除したりできる

  • jPolaroid

    jPolaroid

    普通の画像にポラロイド風の装飾をしてくれる