jQuery学習の---効果

今日引き続きjQueryを学んで、主にjQueryのあれらの効果の表示を記録します
1.animate()関数
animate()メソッドは、CSSプロパティセットのカスタムアニメーションを実行します.
この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.
アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).
構文は次のとおりです:$(selector).animate(styles,speed,easing,callback)
 
パラメータ
説明
styles
必要です.アニメーション効果を生成するCSSスタイルと値を指定します.使用可能なCSSスタイルの値(インスタンスを指定):

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

maxWidth

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

注記:CSSスタイルでは、CSS名(font-sizeなど)ではなくDOM名(fontSizeなど)を使用して設定します.
speed
オプション.アニメーションの速度を指定します.デフォルトは「normal」です.可能な値:

ミリ秒(例えば1500)

"slow"

"normal"

"fast"

easing
オプション.異なるアニメーションポイントでアニメーション速度を設定するeasing関数を指定します.内蔵easing関数:

swing

linear

callback
オプション.animate関数の実行が完了したら、実行する関数.
例:

  $(".btn1").click(function(){

    $("#box").animate({height:"300px", width:"200px", margin:"200px"}, "slow", function(){alert("animate");});

2.fadeIn()とfadeOut()関数
この2つは一般的にペアで表示され、fadeIn()メソッドは、エレメントが非表示である場合、選択されたエレメントを表示するためにフェードイン効果を使用します.fadeOut()メソッドでは、選択した要素が非表示である場合、フェードアウト効果を使用して非表示にします.
構文は次のとおりです:$(selector).fadeOut(speed,callback)           　　$(selector).fadeIn(speed,callback)
例:

  $(".btn1").click(function(){

  $("p").fadeOut()

  });

  $(".btn2").click(function(){

  $("p").fadeIn();

  });

3.toggle()関数
toggle()メソッドは、要素の表示状態を切り替えます.
選択した要素が表示されている場合は非表示になり、選択した要素が非表示になっている場合は表示されます.
構文は次のとおりです:$(selector).toggle(speed,callback,switch)
speed
オプション.エレメントが非表示に見える速度(または逆)を指定します.既定は0です.可能な値:

ミリ秒(例えば1500)

"slow"

"normal"

"fast"

速度を設定すると、エレメントは表示される非表示のプロセスから、その高さ、幅、外側の距離、内側の余白、透明度を徐々に変更します.このパラメータを設定すると、switchパラメータは使用できません.
callback
オプション.toggle関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.speedパラメータが設定されていない限り、このパラメータは設定できません.
switch
オプション.ブール値toggleが選択したすべての要素を非表示または表示にするかどうかを指定します.

True-すべての要素

が表示されます.

False-すべての要素を非表示

このパラメータを設定すると、speedパラメータとcallbackパラメータは使用できません.
例:

$("p").toggle();