jQueryを使った要素を動かしてみるサンプルです。
アクセスするとコンテンツ部分をふわっと表示→タイトル部分が上から降りてくる→フッター部分が左から登場
という動きをします。
(あまり使う機会はないかもしれませんが、、、)
ステップ
jQuery読み込み
jQueryを読み込みます。ローカルでもホストでも。
※jqueryは1.7系と2.0系で試した所大丈夫でした。他も動くと思いますが動かない場合バージョンを確認してください。
HTML書く
今回のサンプルはこんな感じです。シンプル。
Title
Contents
jQuery書く
コードは以下です。
$(function(){ var hide = $('h1,#contents'); //隠すhtmlタグを指定 var title = $('h1'); //タイトルのタグを指定 var cont = $('#contents'); //コンテンツのタグを指定 hide.addClass('none'); //変数hideにcssのclass"none"を指定 title.fadeIn(1000, function(){ //変数titleをフェードインさせ、その後上から移動させる $(this).animate({top : 0}, 500); }); cont.fadeIn(1000, function(){ //変数contをフェードインさせ、その後#footerを表示と移動 $('#footer').animate({width: 700, height: 100, left:1000, top: 100 }, 2000); }); });
コメントアウトでやっていることを書きました。実はfadeInとanimateだけっていう。
fadeInでfunctionを使うと実行したあとにfunction以下を実行します。#footerの方はanimateで要素の縦横を出しながら動かしています。
あとは数値を変えたりすれば色々とできるかと。
以上、jqueryで要素を遅らせて表示させるTIPSでした。