ホーム > stop (全4件)
  • 要素に指定された実行中のアニメーションを中止する

    body要素のアニメーションを中止する。

    $( 'body' ).stop();

// 実行中のアニメーションを中断し、背景を黒くするアニメーションを実行する
$( 'body' ).stop().animation( { backgroundColor: "#000000" }, 1000} );

    アニメーションは要素別のキューに保存されており、stop関数はそのキューを空にする。キューが空で次のアニメーションが指定されている場合は、すぐに次のアニメーションが実行される。

    キーワード:
  • アニメーションを中止する

    IDが’cancel’の要素がクリックされたら、IDが’view_content’の要素のアニメーションを中止する。

    $( '#view_content' ).animate( { top: -1000 }, 3000 );

$( '#cancel' ).click( function () {
	$( '#view_content' ).stop();
} );

    特定の要素に対して実行しているアニメーション効果を中止する場合にstop関数を使用する。なおstop関数にはバージョンによって2または3のパラメータが指定可能。

    キーワード:
  • jQuery UIのdraggableのドラッグ終了時、元の位置に戻す

    IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。

    $(document).ready( function () {
	$( '#item' ).draggable( {
		stop: function ( e, ui ) {
			if ( Math.abs( ui.position.top ) <= 100 &&
			     Math.abs( ui.position.left ) <= 100 ) {
				$(this).attr( 'style', 'position: relative;' );
			}
		}
	} );
} );

    attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。

    キーワード:
  • jQuery UIのdraggableのドラッグ途中とドラッグ終了時の対応を行う

    IDがitemの要素にdraggableを適用し、ドラッグ中とドラッグ終了イベントの処理を行う。

    $(document).ready( function () {
	$( '#item' ).draggable( {
		drag: function ( e, ui ) {
			if ( ui.position.left > 0 ) {
				// 最初の位置よりも右側に移動した場合
			}
		},
		stop: function ( e, ui ) {
			if ( ui.position.top > 0 ) {
				// 最初の位置よりも下側に移動した場合
			}
		}
	} );
} );

    drapプロパティにはドラッグ中に発生するイベントの関数を、stopプロパティにはドラッグ終了時に発生するイベントの関数を指定する。イベント関数が受け取るui.position.topとleftには移動位置は最初の位置からの相対位置が格納されている。

    キーワード:
 
 
ツールバーへスキップ