h2ospace

[jQuery Mobile] さまざまなページ遷移アニメーション

2011-01-31 20:00:21

前回紹介したページ遷移のアニメーションでは、画面が左にスライドするアニメーションが展開されました。このアニメーションの種類は、簡単に変更することができます。

次のように、リンク時に「data-transition」属性を付加して、指定します。

[xml]
<a href="#page2" data-transition="slideup">スライドアップ（slideup）</a>
[/xml]

その他、次のような種類があります。

  • slide（スライド）
  • slideup（スライドアップ）
  • slidedown（スライドダウン）
  • pop（ポップ）
  • fade（フェード）
  • flip（フリップ）

それぞれの動きはサンプルをご覧ください。

»サンプルへ

[PR] たにぐちまことのJavaScript/jQuery Mobile入門講座 | ロクナナワークショップ

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]