jQuery効果

  • 前のページ
  • 次のページ

jQueryは、非表示、表示、切り替え、スライド、カスタムアニメーションなどの効果を作成できます。

実際に試してみてください

この jQuery エフェクトを試してください：

CodeW3C.com - 領先する Web 技術チュートリアルサイト

CodeW3C.com では、必要なすべてのウェブサイト構築チュートリアルを見つけることができます。

ここをクリックしてください

例

jQuery hide()
シンプルな jQuery hide() 関数のデモ
jQuery hide()
別の hide() デモ。部分テキストの隠し方法
jQuery slideToggle()
シンプルなスライドパネル効果のデモ
jQuery fadeTo()
シンプルな jQuery fadeTo() 関数のデモ
jQuery animate()
シンプルな jQuery animate() 関数のデモ

jQuery 隠しと表示

hide() と show() の2つの関数を使用して、jQuery は HTML 要素の隠しと表示をサポートします：

例

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

実際に試してみてください

hide() と show() は speed と callback の2つのオプションパラメータを設定できます。

構文：

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed パラメータは表示または隠す速度を指定します。以下の値を設定できます："slow", "fast", "normal" またはミリ秒。

callback パラメータは hide または show 関数が完了した後に実行される関数名です。以下の章でさらに学びます： callback パラメータの知識

例

$("button").click(function(){
$("p").hide(1000);
});

実際に試してみてください

jQuery 切り替え

jQuery toggle() 関数は show() または hide() 関数を使用して HTML 要素の可視状態を切り替えます。

表示されている要素を隠し、非表示の要素を表示します。

構文：

$(selector).toggle(speed,callback)

speed 以下の値を設定できます："slow"、"fast"、"normal"またはミリ秒。

例

$("button").click(function(){
$("p").toggle();
});

実際に試してみてください

callback パラメータは、この関数が完了した後に実行される関数の名前です。以下の章でさらに詳しく学びます： callback パラメータの知識

jQuery スライド関数 - slideDown, slideUp, slideToggle

jQuery は以下のスライド関数を持ちます：

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed 以下の値を設定できます："slow"、"fast"、"normal"またはミリ秒。

callback パラメータは、この関数が完了した後に実行される関数の名前です。以下の章でさらに詳しく学びます： callback パラメータの知識

slideDown()の例

$(".flip").click(function(){
$(".panel").slideDown();
});

実際に試してみてください

slideUp()の例

$(".flip").click(function(){
$(".panel").slideUp();
}

実際に試してみてください

slideToggle()の例

$(".flip").click(function(){
$(".panel").slideToggle();
});

実際に試してみてください

jQuery Fade関数 - fadeIn(), fadeOut(), fadeTo()

jQueryは以下のfade関数を提供します：

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 以下の値を設定できます："slow"、"fast"、"normal"またはミリ秒。

fadeTo()関数では opacity パラメータは、指定された不透明度に弱めることを規定します。

callback パラメータは、この関数が完了した後に実行される関数の名前です。以下の章でさらに詳しく学びます： callback パラメータの知識

fadeTo()の例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

実際に試してみてください

fadeOut()の例

$("button").click(function(){
$("div").fadeOut(4000);
});

実際に試してみてください

jQueryカスタムアニメーション

jQuery関数は、カスタムアニメーションを作成するための構文を提供します：

$(selector).animate({params},[duration],[easing],[callback])

重要なパラメータは paramsアニメーションを生成する CSS 属性を定義します。複数の此类属性を同時に設定できます：

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

二番目の引数は durationアニメーションに適用される時間を定義します。設定する値は："slow"、"fast"、"normal"またはミリ秒です。

例1

<script type="text/javascript">
$("document").ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

実際に試してみてください

例2

<script type="text/javascript">
$("document").ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

実際に試してみてください

HTML要素はデフォルトで静的定位であり、移動できません。

要素を移動可能にする場合は、CSSのpositionをrelativeまたはabsoluteに設定してください。

jQuery エフェクト - このページから

関数 説明
$(selector).hide() 選択された要素を非表示にします
$(selector).show() 選択された要素を表示します
$(selector).toggle() 選択された要素を（非表示と表示の間で）切り替えます
$(selector).slideDown() 選択された要素を下にスライドして（表示に）します
$(selector).slideUp() 選択された要素を上にスライドして（非表示に）します
$(selector).slideToggle() 選択された要素に対して上にスライドして下にスライドする切り替えを行います
$(selector).fadeIn() 選択された要素をフェードインします
$(selector).fadeOut() 選択された要素をフェードアウトします
$(selector).fadeTo() 選択された要素を指定された不透明度にフェードアウトします
$(selector).animate() 選択された要素にカスタムアニメーションを実行します

完全な参考マニュアルが必要な場合は、私たちの jQuery Effect 参考マニュアル。

  • 前のページ
  • 次のページ