[JS]jQueryを使用して上下左右からパネルをスライドさせるチュートリアル

サイト構築 -JavaScript

Post on:2010年4月23日

sponsors

二枚の画像を上下左右のスライドのアニメーションで変更するチュートリアルを1stwebdesignerから紹介します。

How to Create Sleek Sliding Box Effect With jQuery
デモページ

滑らかなスライドのアニメーションはjQueryで実装されており、シンプルなスクリプトを追加するだけです。
基本のスクリプトは下記のようになります。

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$(document).ready(function(){
$('#top-left').hover(function(){
$(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);
 },function(){
$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 });
</textarea>

$(document).ready(function(){

$('#top-left').hover(function(){

$(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);

},function(){

$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});

});

</textarea>

HTMLもシンプルで二枚の画像をdiv要素で実装するだけです。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div id="top-left" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
</textarea>