ホーム > animate (全4件)
  • ページ内リンクをスムーズにする

    ページ内リンクをスムーズにする。

    $( 'a[href^=#]' ).click( function () {
	pos = $( $(this).attr( 'href' ) ).offset().top;
	$( 'html,body' ).animate( { scrollTop: pos }, 'fast' );
	return false;
} );

    セレクタで’a[href^=#]’を指定することでa要素のhref属性の値が’#’で始まっているページ内リンクを取得。そのクリックイベントで、対象のアンカー要素のトップ座標を取得してスクロールを実現している。

    キーワード:
  • 要素に指定された実行中のアニメーションを中止する

    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のパラメータが指定可能。

    キーワード:
  • ページトップへスクロール

    idがpagetopの要素をクリックすると、ページのトップへスクロールする。

    $('#pagetop').click( function() {
	$('html,body').animate({'scrollTop':'0px'},'slow');
	return false;
} );

    html要素はIE7～9、Firefox 9.01、Opera 11.60が動作する（Chrome 16、Safari 5.1はNG）。body要素はChrome 16、Safari 5.1が動作する（IE7～9、Firefox 9.01、Opera 11.60はNG）。このようなことから、htmlとbody要素の両方を指定する必要がある。

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