jQueryイベント-animate(),change(),stop(),finish()
9279 ワード
jQuery animate()メソッド
定義と使用法
animate()メソッドは、CSSプロパティセットのカスタムアニメーションを実行します.
この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.
アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).
注記:「+=」または「-=」を使用して相対アニメーション(relative animations)を作成します.
構文
(selector).animate({styles},speed,easing,callback)
パラメータ
説明
styles
必要です.アニメーション効果を生成する1つまたは複数のCSS属性/値を指定します.注意:animate()メソッドとともに使用する場合、このプロパティ名はアルパカでなければなりません.padding-leftの代わりにpaddingLeftを使用し、margin-rightの代わりにmargin-rightを使用する必要があります.アニメーションのアトリビュートを適用するには:
backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
ヒント:カラーアニメーションはコアjQueryライブラリに含まれません.アニメーションカラーを適用するには、jQuery.からcomカラーアニメーションプラグインをダウンロードします.
speed
オプション.アニメーションの速度を指定します.可能な値:
ミリ秒"slow"
"fast"
easing
オプション.アニメーションの異なる点で要素の速度を指定します.デフォルトは「swing」です.可能な値:
「swing」-先頭/末尾の移動が遅く、中間の移動が速い「linear」-を均等に移動
ヒント:拡張プラグインで使用可能なeasing関数を追加します.
callback
オプション.animate関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.
構文
(selector).animate({styles},{options})
パラメータ
説明
styles
必要です.アニメーション効果を生成する1つまたは複数のCSS属性/値(同上)を指定します.
options
オプション.アニメーションの追加オプションを指定します.可能な値:
speed-アニメーションの速度を設定するeasing-使用するeasing関数を規定する
callback-アニメーション完了後に実行する関数を指定します.
Step-アニメーションの各ステップが完了した後に実行する関数を規定する
Queue-ブール値.効果キューにアニメーションを配置するかどうかを示します.falseの場合、アニメーションはすぐに開始されます.
specialEasing-stylesパラメータからの1つまたは複数のCSS属性のマッピング、およびそれらの対応するeasing関数
定義と使用法
animate()メソッドは、CSSプロパティセットのカスタムアニメーションを実行します.
この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.
アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).
注記:「+=」または「-=」を使用して相対アニメーション(relative animations)を作成します.
構文
(selector).animate({styles},speed,easing,callback)
パラメータ
説明
styles
必要です.アニメーション効果を生成する1つまたは複数のCSS属性/値を指定します.注意:animate()メソッドとともに使用する場合、このプロパティ名はアルパカでなければなりません.padding-leftの代わりにpaddingLeftを使用し、margin-rightの代わりにmargin-rightを使用する必要があります.アニメーションのアトリビュートを適用するには:
backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
ヒント:カラーアニメーションはコアjQueryライブラリに含まれません.アニメーションカラーを適用するには、jQuery.からcomカラーアニメーションプラグインをダウンロードします.
speed
オプション.アニメーションの速度を指定します.可能な値:
ミリ秒"slow"
"fast"
easing
オプション.アニメーションの異なる点で要素の速度を指定します.デフォルトは「swing」です.可能な値:
「swing」-先頭/末尾の移動が遅く、中間の移動が速い「linear」-を均等に移動
ヒント:拡張プラグインで使用可能なeasing関数を追加します.
callback
オプション.animate関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.
構文
(selector).animate({styles},{options})
パラメータ
説明
styles
必要です.アニメーション効果を生成する1つまたは複数のCSS属性/値(同上)を指定します.
options
オプション.アニメーションの追加オプションを指定します.可能な値:
speed-アニメーションの速度を設定するeasing-使用するeasing関数を規定する
callback-アニメーション完了後に実行する関数を指定します.
Step-アニメーションの各ステップが完了した後に実行する関数を規定する
Queue-ブール値.効果キューにアニメーションを配置するかどうかを示します.falseの場合、アニメーションはすぐに開始されます.
specialEasing-stylesパラメータからの1つまたは複数のCSS属性のマッピング、およびそれらの対応するeasing関数
≪インスタンス｜Instance｜emdw≫
0.アニメーションを停止する
[javascript] view plain
copy
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
animateの例:
1.ボタンをクリックするとdiv要素のいくつかの異なる属性が一緒に変化する
[javascript] view plain
copy
$("#go").click(function () {
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000);
});
2.指定した要素を左右に移動
[javascript] view plain
copy
$("#right").click(function () {
$(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
$(".block").animate({ left: '-50px' }, "slow");
});
3.段落の高さと透明度を600ミリ秒で切り替える
[javascript] view plain
copy
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
4.段落をleftが50の場所に500ミリ秒で移動し、完全に鮮明に表示する(透明度は1)
[javascript] view plain
copy
$("p").animate({
left: 50, opacity: 'show'
}, 500);
5.非表示の切り替え
[javascript] view plain
copy
$(".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;
});
});
[javascript] view plain
copy
//スクロールフォーカス$(window).scroll(function()/現在のウィンドウのスクロールイベントvar winTop = $(window).scrollTop();//現在のウィンドウのサイズを取得するvar objTop = $("#obj1").offset().top;//現在のオブジェクトのx座標を取得する
});
jQueryイベント-change()メソッド
定義と使用法
要素の値が変更されるとchangeイベントが発生します.
このイベントは、テキストドメイン(text field)、およびtextareaおよびselect要素にのみ適用されます.
change()関数はchangeイベントをトリガーしたり、changeイベントが発生したときに実行する関数を規定したりします.
注記:select要素で使用すると、changeイベントはオプションを選択したときに発生します.このイベントは、text fieldまたはtext areaに使用されると、要素がフォーカスを失ったときに発生します.
changeイベントのトリガー
選択された要素のchangeイベントをトリガーします.
≪インスタンス｜Instance｜emdw≫
入力フィールドが変更されると、その色が変更されます.$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
jQuery効果-stop()メソッド
定義と使用法
stop()メソッドは、現在実行中のアニメーションを停止します.
構文
$(selector).stop(stopAll,goToEnd)
パラメータ
説明
stopAll
オプション.選択した要素のすべてのキューに追加されたアニメーションを停止するかどうかを指定します.
goToEnd
オプション.現在のアニメーションの完了を許可するかどうかを指定します.このパラメータはstopAllパラメータが設定されている場合にのみ使用できます.
最初のパラメータの意味はアニメーションシーケンスを空にするかどうかで、trueの場合は現在の要素のアニメーション効果を停止し、falseの場合は後に付いているすべてのアニメーション効果を停止します。
2番目のパラメータは、現在のアニメーション効果を最後まで実行するかどうかです。これは、停止時に現在のアニメーションが実行されたときにアニメーション効果の一部がまだ実行されていない場合、アニメーションを停止するときに表示されるのは、現在のアニメーション効果か、すべてのアニメーションの終了点の効果かを意味します。アニメーションの実行後の効果が望ましい場合は、このパラメータはtrueです。そうでなければfalseの場合アニメーション効果はstop実行時に停止します
≪インスタンス｜Instance｜emdw≫
現在実行中のアニメーションを停止する:使用.stop()の場合、停止時の画面には、現在アニメーションが実行されている画面が表示されます.
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#stop").click(function(){
$("div").stop();
});
});
jQuery finish()メソッド
定義と使用法
finish()メソッドは、現在実行されているアニメーションを停止し、キューに並んでいるすべてのアニメーションを削除し、選択した要素のすべてのアニメーションを完了します.
この方法は.stop(true,true)メソッドは似ていますが、finish()ではキューアニメーションのCSSプロパティがすべて停止します.
構文
$(selector).finish(queueName)
パラメータ
説明
queueName
オプション.アニメーションを停止するキューの名前を指定します.
≪インスタンス｜Instance｜emdw≫
現在実行中のアニメーションを停止する:使用.finish()の場合、停止時の画面にはすべてのアニメーションキューが実行済みの画面が表示されます.
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#complete").click(function(){
$("div").finish();
});
});
w 3 schoolから
http://www.runoob.com/jquery/eff-animate.html
http://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html
定義と使用法
要素の値が変更されるとchangeイベントが発生します.
このイベントは、テキストドメイン(text field)、およびtextareaおよびselect要素にのみ適用されます.
change()関数はchangeイベントをトリガーしたり、changeイベントが発生したときに実行する関数を規定したりします.
注記:select要素で使用すると、changeイベントはオプションを選択したときに発生します.このイベントは、text fieldまたはtext areaに使用されると、要素がフォーカスを失ったときに発生します.
changeイベントのトリガー
選択された要素のchangeイベントをトリガーします.
≪インスタンス｜Instance｜emdw≫
入力フィールドが変更されると、その色が変更されます.
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});jQuery効果-stop()メソッド
定義と使用法
stop()メソッドは、現在実行中のアニメーションを停止します.
構文
$(selector).stop(stopAll,goToEnd)
パラメータ
説明
stopAll
オプション.選択した要素のすべてのキューに追加されたアニメーションを停止するかどうかを指定します.
goToEnd
オプション.現在のアニメーションの完了を許可するかどうかを指定します.このパラメータはstopAllパラメータが設定されている場合にのみ使用できます.
最初のパラメータの意味はアニメーションシーケンスを空にするかどうかで、trueの場合は現在の要素のアニメーション効果を停止し、falseの場合は後に付いているすべてのアニメーション効果を停止します。
2番目のパラメータは、現在のアニメーション効果を最後まで実行するかどうかです。これは、停止時に現在のアニメーションが実行されたときにアニメーション効果の一部がまだ実行されていない場合、アニメーションを停止するときに表示されるのは、現在のアニメーション効果か、すべてのアニメーションの終了点の効果かを意味します。アニメーションの実行後の効果が望ましい場合は、このパラメータはtrueです。そうでなければfalseの場合アニメーション効果はstop実行時に停止します
≪インスタンス｜Instance｜emdw≫
現在実行中のアニメーションを停止する:使用.stop()の場合、停止時の画面には、現在アニメーションが実行されている画面が表示されます.
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#stop").click(function(){
$("div").stop();
});
});
jQuery finish()メソッド
定義と使用法
finish()メソッドは、現在実行されているアニメーションを停止し、キューに並んでいるすべてのアニメーションを削除し、選択した要素のすべてのアニメーションを完了します.
この方法は.stop(true,true)メソッドは似ていますが、finish()ではキューアニメーションのCSSプロパティがすべて停止します.
構文
$(selector).finish(queueName)
パラメータ
説明
queueName
オプション.アニメーションを停止するキューの名前を指定します.
≪インスタンス｜Instance｜emdw≫
現在実行中のアニメーションを停止する:使用.finish()の場合、停止時の画面にはすべてのアニメーションキューが実行済みの画面が表示されます.
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#complete").click(function(){
$("div").finish();
});
});
w 3 schoolから
http://www.runoob.com/jquery/eff-animate.html
http://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html
$(selector).stop(stopAll,goToEnd)
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#stop").click(function(){
$("div").stop();
});
});
定義と使用法
finish()メソッドは、現在実行されているアニメーションを停止し、キューに並んでいるすべてのアニメーションを削除し、選択した要素のすべてのアニメーションを完了します.
この方法は.stop(true,true)メソッドは似ていますが、finish()ではキューアニメーションのCSSプロパティがすべて停止します.
構文
$(selector).finish(queueName)
パラメータ
説明
queueName
オプション.アニメーションを停止するキューの名前を指定します.
≪インスタンス｜Instance｜emdw≫
現在実行中のアニメーションを停止する:使用.finish()の場合、停止時の画面にはすべてのアニメーションキューが実行済みの画面が表示されます.
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#complete").click(function(){
$("div").finish();
});
});
w 3 schoolから
http://www.runoob.com/jquery/eff-animate.html
http://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html