[JS]jQueryを使用して上下左右からパネルをスライドさせるチュートリアル
Post on:2010年4月23日
sponsors
二枚の画像を上下左右のスライドのアニメーションで変更するチュートリアルを1stwebdesignerから紹介します。
How to Create Sleek Sliding Box Effect With jQuery
デモページ
滑らかなスライドのアニメーションはjQueryで実装されており、シンプルなスクリプトを追加するだけです。
基本のスクリプトは下記のようになります。
JavaScript
|
1 2 3 4 5 6 7 8 |
<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> |
HTMLもシンプルで二枚の画像をdiv要素で実装するだけです。
HTML
|
1 2 3 4 5 6 |
<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> |
sponsors
