jQueryでのアニメーション処理のまとめ
6693 ワード
queue()/dequeue()の2つの方法は、AjaxのXMLHttpRequestオブジェクトのように隠蔽されており、一般には知られていません.この2つの方法はアニメーション処理に役立ちます.私たちはよくこのようなコードを書きます.
このようにtest divのheight、width、opacityは同時に変化し、時には同期して実行したくないのではなく、形状の変化と透明度の変化を分けて、まず300*300のdivになって、それから透明度が徐々に変化して、私たちはこのように書く必要があります
10個のアニメーションの流れがあれば、コードはどのようなものか想像してみてください.queue()とdequeue()はこのような問題を解決することができます.すべての流れの方法のために1つのキューを見て、functionを順番に呼び出して、まず文法queue([queueName],newQueue)の操作を見て、キューの方法を実行したいと思っています.
最初のパラメータはキュー名で、書かないとデフォルトはfxです
2番目のパラメータは、すべてのキュー関数を格納する関数配列であってもよいし、キューに新しい関数を追加するための戻り関数であってもよい.
dequeue([queueName])は、一致する要素のキュー内の次のfunctionを実行します.
このメソッドを呼び出すたびにキュー内の次の関数を実行
上のコードはtest divを先に200*200にすることができて、それから400*400になることができて、すべてのアニメーションはすべて関数を取り消して、キューの中の次の方法を呼び出して、2つのアニメーションは順次実行して、もし実行期間に更にある関数を追加したいならばこのようにすることができます
要するに、この2つの方法は、アニメーションが所定の順序で実行されるのを容易にするためである.
clearQueue()/stop()
この2つの方法は主にアニメーションをキャンセルするためです
clearQueue([queueName])キュー内の関数を空にします
stop([queue][,clearQueue][,jumpToEnd])は、進行中のアニメーションを停止するために使用されます.
Queue:進行中のアニメーションキュー名
clearQueue:デフォルトはfalseで、キュー自体も空にするかどうか
jumpToEnd:デフォルトはfalseで、すぐにアニメーションを実行するかどうか
さっきのアニメをやめたいなら
このように書くとアニメーションは終了しません.ただ、現在のアニメーションが実行された後、キュー内の次のアニメーションは呼び出されません(キューが空になっていますか.次はありません).すぐにアニメーションを停止したい場合は、このように書くことができます.
アニメーションを一時停止するか、すぐに実行するかについては、stop()のパラメータを設定することを学びます.
slideDown()/slideUp()/slideToggle()
slide効果はアニメーションを作るときによく使われます.特にメニューです.この3つの関数は簡単です.要素の収め/伸ばし/自動判断で伸ばします.しかし、そのパラメータはdurationだけでなく、APIの紹介を見てみましょう.このSanger関数のパラメータは似ています.slideUpは例を挙げます.
slideUp([duration][,easing][,complete])easingはグラデーション方式で、これは私はこれまで手作業で変更したことがありません.durationは書かないと、デフォルトでは約1秒でアニメーションを完成します.
slideUp(options)
optionsでよく使われる構成は
duration:アニメーション時間
Queue:これは上を見れば自然にわかります
Step:アニメーション中に属性が変更されるたびに実行
complete:アニメーション完了時に実行
start:アニメーション開始時に実行
Always:アニメーションが終了したり、予期せぬ発生が完了しなかったりした場合に発生します.
この3つの関数は実行時に要素heightを修正し、sideUp()の実行後にheightを復元し、diaplayをnoneに設定します
fadeIn()/fadeOut()/fadeToggle()/fadeTo()fadeIn()/fadeOut()/fadeToggle()の使い方はslideシリーズと似ていますが、これら3つの関数を変更すると要素の透明度、fadeOut()関数は実行後に要素opacityを復元し、displayプロパティをnoneに設定します
fadeTo(duration,opacity[,easing][,complete])fadeTo()メソッドはそれほど複雑ではありませんが、fadeTO()のdurationとopacityは省略できないので書かなければなりません
show()/hide()/toggle()
この3つの関数の使い方はslideシリーズと同じですが、効果的にはいくつか違います.
1.パラメータdurationが書かれていない場合は、すぐにアニメーションを実行します.
2.このアニメーションはheight、width、opacityのプロパティを同時に変更します
3.hide()実行が完了すると、height、width、opacityプロパティが復元され、displayがnoneに設定されます.
animate()複雑なアニメーションは上のいくつかの関数では実現できない場合がありますが、この場合は強力なanimateが役に立つ場合があります.animate()には2つの使い方があります
.animate( properties [, duration ] [, easing ] [, complete ] )
ほとんどの属性は説明する必要はありません.propertiesはjsonで、属性の値は字面量、function、toggle、簡単な式で、functionであれば戻り値を属性に与え、jQueryに詳しい学生は必ず「toggle」が何なのかを理解して、1つの属性を初期値と最小値の間で切り替えることで、toggleを使用できる属性はwidth、height、opacityなどには数値属性が含まれており、単純な式は+=、-=などであり、例えば「width」:+=10 px」などである.
リターン関数が入力されると、アニメーションの実行後に呼び出されます.
.animate( properties, options )
この使い方はもっと柔軟で、propertiesは前の使い方と同じように、よくoptionsを使います.
duration:アニメーション時間
Queue:functionキュー
Step:属性調整毎のリターン関数
complete:アニメーションの消去関数を完了する
start:アニメーション開始時に呼び出す
Always:アニメーションが終了したり、予期せぬ発生が完了しなかったりした場合に発生します.
jQueryが使いやすいといえば、上のいくつかの配置はよく知られているのではないでしょうか.
hover()厳密にはこれはアニメーション関数ではないが,低バージョンIEのhoverは多くの要素に機能せず,CSSでは多くの動作を完了できないため,JavaScriptを用いてhaverイベントの処理を行うことがしばしば必要である.
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法は簡単で、あまり紹介しないで、このようにmouseinとmouseoutを一緒に書くことができます.
$('#test').animate({
"width": "300px",
"height": "300px",
"opacity":"1"
});
このようにtest divのheight、width、opacityは同時に変化し、時には同期して実行したくないのではなく、形状の変化と透明度の変化を分けて、まず300*300のdivになって、それから透明度が徐々に変化して、私たちはこのように書く必要があります
$('#test').animate({
"width": "300px",
"height": "300px",
}, function () {
$('#test').animate({ "opacity": "1" });
});
10個のアニメーションの流れがあれば、コードはどのようなものか想像してみてください.queue()とdequeue()はこのような問題を解決することができます.すべての流れの方法のために1つのキューを見て、functionを順番に呼び出して、まず文法queue([queueName],newQueue)の操作を見て、キューの方法を実行したいと思っています.
最初のパラメータはキュー名で、書かないとデフォルトはfxです
2番目のパラメータは、すべてのキュー関数を格納する関数配列であってもよいし、キューに新しい関数を追加するための戻り関数であってもよい.
dequeue([queueName])は、一致する要素のキュー内の次のfunctionを実行します.
このメソッドを呼び出すたびにキュー内の次の関数を実行
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
上のコードはtest divを先に200*200にすることができて、それから400*400になることができて、すべてのアニメーションはすべて関数を取り消して、キューの中の次の方法を呼び出して、2つのアニメーションは順次実行して、もし実行期間に更にある関数を追加したいならばこのようにすることができます
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
$('#test').queue('myQueue',function () {
$(this).slideUp().dequeue('myQueue');
});
要するに、この2つの方法は、アニメーションが所定の順序で実行されるのを容易にするためである.
clearQueue()/stop()
この2つの方法は主にアニメーションをキャンセルするためです
clearQueue([queueName])キュー内の関数を空にします
stop([queue][,clearQueue][,jumpToEnd])は、進行中のアニメーションを停止するために使用されます.
Queue:進行中のアニメーションキュー名
clearQueue:デフォルトはfalseで、キュー自体も空にするかどうか
jumpToEnd:デフォルトはfalseで、すぐにアニメーションを実行するかどうか
さっきのアニメをやめたいなら
$('#test').clearQueue('myQueue');
このように書くとアニメーションは終了しません.ただ、現在のアニメーションが実行された後、キュー内の次のアニメーションは呼び出されません(キューが空になっていますか.次はありません).すぐにアニメーションを停止したい場合は、このように書くことができます.
$('#test').stop();
アニメーションを一時停止するか、すぐに実行するかについては、stop()のパラメータを設定することを学びます.
slideDown()/slideUp()/slideToggle()
slide効果はアニメーションを作るときによく使われます.特にメニューです.この3つの関数は簡単です.要素の収め/伸ばし/自動判断で伸ばします.しかし、そのパラメータはdurationだけでなく、APIの紹介を見てみましょう.このSanger関数のパラメータは似ています.slideUpは例を挙げます.
slideUp([duration][,easing][,complete])easingはグラデーション方式で、これは私はこれまで手作業で変更したことがありません.durationは書かないと、デフォルトでは約1秒でアニメーションを完成します.
slideUp(options)
optionsでよく使われる構成は
duration:アニメーション時間
Queue:これは上を見れば自然にわかります
Step:アニメーション中に属性が変更されるたびに実行
complete:アニメーション完了時に実行
start:アニメーション開始時に実行
Always:アニメーションが終了したり、予期せぬ発生が完了しなかったりした場合に発生します.
この3つの関数は実行時に要素heightを修正し、sideUp()の実行後にheightを復元し、diaplayをnoneに設定します
fadeIn()/fadeOut()/fadeToggle()/fadeTo()fadeIn()/fadeOut()/fadeToggle()の使い方はslideシリーズと似ていますが、これら3つの関数を変更すると要素の透明度、fadeOut()関数は実行後に要素opacityを復元し、displayプロパティをnoneに設定します
fadeTo(duration,opacity[,easing][,complete])fadeTo()メソッドはそれほど複雑ではありませんが、fadeTO()のdurationとopacityは省略できないので書かなければなりません
show()/hide()/toggle()
この3つの関数の使い方はslideシリーズと同じですが、効果的にはいくつか違います.
1.パラメータdurationが書かれていない場合は、すぐにアニメーションを実行します.
2.このアニメーションはheight、width、opacityのプロパティを同時に変更します
3.hide()実行が完了すると、height、width、opacityプロパティが復元され、displayがnoneに設定されます.
animate()複雑なアニメーションは上のいくつかの関数では実現できない場合がありますが、この場合は強力なanimateが役に立つ場合があります.animate()には2つの使い方があります
.animate( properties [, duration ] [, easing ] [, complete ] )
ほとんどの属性は説明する必要はありません.propertiesはjsonで、属性の値は字面量、function、toggle、簡単な式で、functionであれば戻り値を属性に与え、jQueryに詳しい学生は必ず「toggle」が何なのかを理解して、1つの属性を初期値と最小値の間で切り替えることで、toggleを使用できる属性はwidth、height、opacityなどには数値属性が含まれており、単純な式は+=、-=などであり、例えば「width」:+=10 px」などである.
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "+=10px"
}, 1500 );
リターン関数が入力されると、アニメーションの実行後に呼び出されます.
.animate( properties, options )
この使い方はもっと柔軟で、propertiesは前の使い方と同じように、よくoptionsを使います.
duration:アニメーション時間
Queue:functionキュー
Step:属性調整毎のリターン関数
complete:アニメーションの消去関数を完了する
start:アニメーション開始時に呼び出す
Always:アニメーションが終了したり、予期せぬ発生が完了しなかったりした場合に発生します.
jQueryが使いやすいといえば、上のいくつかの配置はよく知られているのではないでしょうか.
$( "#book" ).animate({
width: "toggle",
height: "toggle"
}, {
duration: 5000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function() {
$( this ).after( "Animation complete." );
}
});
hover()厳密にはこれはアニメーション関数ではないが,低バージョンIEのhoverは多くの要素に機能せず,CSSでは多くの動作を完了できないため,JavaScriptを用いてhaverイベントの処理を行うことがしばしば必要である.
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法は簡単で、あまり紹介しないで、このようにmouseinとmouseoutを一緒に書くことができます.