よく使用される jQuery アニメーション イベントとアニメーション関数を共有する_jquery

一般的に使用されるいくつかの jQuery アニメーション関数が整理されており、インタラクティブなページを作成するときに非常に役立ちます

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

次に、アニメーション関数で操作できるいくつかの CSS プロパティを整理しました。これらは実際にインターネット上の他の場所 (http://www.jb51.net/article/75510.htm) から見つかりました。 :

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 (animate 関数の css パラメーターで指定され、標準の css プロパティとは異なります。たとえば、この css 標準は font-size です。同様に
これは多くの顔にも当てはまります)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

jQuery アニメーション関数

jQuery アニメーション関数は 3 つのカテゴリに分類されます:

1. 基本的なアニメーション機能: 透明なグラデーションとスライド効果の両方、一般的に使用されるアニメーション効果。
2. スライドアニメーション機能: スライド効果のみを使用します。
3. フェードアニメーション機能: フェード効果のみを使用します。

1. 基本的なアニメーション機能:

1. show()

非表示の一致する要素を表示します。これは、「show(speed, [callback])」のアニメーション化されていないバージョンです。選択した要素が表示されている場合、このメソッドは何も変更しません。このメソッドは、要素が Hide() メソッドによって非表示になっているか、CSS で display:none が設定されているかに関係なく機能します。
例: すべての段落を表示、$("p").show()

2. show(speed,[callback])

一致する要素をエレガントなアニメーションで表示し、オプションで表示完了後にコールバック関数を返します。一致した各要素の高さ、幅、不透明度は、指定された速度に基づいて動的に変更できます。
例: 低速アニメーションを使用して非表示の段落を表示し、600 ミリ秒続きます。$("p").show(600)

3. 非表示()

表示要素を非表示にします。これは、「hide( Speed, [callback] )」のアニメーション化されていないバージョンです。選択した要素が非表示の場合、このメソッドは何も変更しません。
例: すべての段落を非表示にする、$("p").hide()

4. 隠す(速度,[コールバック])

エレガントなアニメーションで一致する要素をすべて非表示にし、表示完了後にオプションでコールバック関数をトリガーします。指定された速度に基づいて、一致した各要素の高さ、幅、不透明度を動的に変更できます。 jQuery1.3では、パディングやマージンもアニメーション化され、よりスムーズな効果が得られます。
例: 600 ミリ秒かけて段落をゆっくり非表示にします $("p").hide("slow");

5. トグル

要素の表示状態を切り替えます。要素が表示されている場合は非表示に切り替え、要素が非表示になっている場合は表示に切り替えます。
例: すべての段落の表示状態を切り替えます、$("p").toggle()

6. トグル(スイッチ)

切り花要素の表示状態はスイッチパラメータに基づきます(trueは表示、falseは非表示)。 switch が true に設定されている場合は、show() メソッドが呼び出され、一致する要素が表示されます。 switch が false に設定されている場合は、hide() が呼び出されて要素が非表示になります。
例: すべての段落の表示状態を切り替えます、varflip=0;$("button").click(function(){$("p").toggle(flip %2==0);});

7. トグル(速度,[コールバック])

一致するすべての要素をエレガントなアニメーションで切り替え、オプションで表示完了後にコールバック関数をトリガーします。指定された速度に従って、一致する各要素の高さ、幅、不透明度を動的に変更します。 jquery1.3ではpaddingやmarginにもアニメーションが付き、よりスムーズな効果が得られます。

例: 200 ミリ秒を使用して段落の表示状態をすばやく切り替え、ダイアログ ボックス $("p").toggle("fast",function(){alert("hello!") をポップアップします。 ;});

2. スライドアニメーション機能 スライド

1. slideDown(速度,[コールバック])

高さの変更（下方向に増加）を通じて一致するすべての要素を動的に表示し、表示完了後に任意の場所でコールバック関数を送信します。このアニメーション効果は要素の高さを調整するだけであり、一致する要素を「スライド」方式で表示することができます。 jQuery 1.3 では、上下のパディングとマージンもアニメーション化され、効果がよりスムーズになります。
例: 600 ミリ秒かけて段落をゆっくりと下にスライドさせます、$("p").slideDown("slow");

2. slideUp(速度,[コールバック])

高さを変更し (上向きに減少)、オプションで非表示の完了後にコールバック関数をトリガーすることで、一致するすべての要素を動的に非表示にします。
例: 段落を 600 ミリ秒かけてゆっくりと上にスライドさせます、$("p").slideUp("slow");

3. slideToggle(speed,[callback])

高さを変更することで、一致するすべての要素の表示を切り替え、オプションで切り替え完了後にコールバック関数をトリガーします。
例: 段落を 600 ミリ秒以内にゆっくりと上下にスライドさせます。 $("p").slideToggle("slow");

3. フェーディング機能 フェーディング

1. フェードイン(速度,[コールバック])

透明度の変更により、一致するすべての要素のフェードイン効果を実現し、アニメーションの完了後にオプションでコールバック関数を呼び出します。このアニメーションは要素の不透明度のみを調整します。つまり、一致するすべての要素の高さと幅は変更されません。
例: 600 ミリ秒を使用して段落をゆっくりとフェードインします、$("p").fadeIn("slow");

2. フェードアウト(速度,[コールバック])

不透明度の変更により、一致するすべての要素のフェードアウト効果を実現し、オプションでアニメーションの完了後にコールバック関数をトリガーします。
例: 600 ミリ秒を使用して段落をゆっくりフェードアウトします。 $("p").fadeOut("slow");

3. fadeTo(速度,不透明度,[コールバック])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值，则会就该属性调用默认的动画形式。

例如：点击按钮后div元素的几个不同属性一同变化，

$("#go").click(function(){
$("#block").animate({
width:"90%",height:"100%",fontSize:"10em",borderWidth:10
},1000);
});

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

例如：点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".box h3").toggle(function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).addClass("arrow"); 
return false; 
},function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).removeClass("arrow"); 
return false; 
}); 
});