jQuery・タッチデバイスでもそこそこ滑らかなアコーディンパネルを3種類作りました [IE8対応]

150809_001

お客さんから、「アコーディオンがカクカクすぎるの何とかなりません?」とご要望を頂いたので、作りました。様々な場面で使えるよう、3種類用意してあります。

目次

検証済みブラウザとOS

  • IE 8~ ※一部CSSはIE8不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • PCブラウザで、引っ掛かりがない滑らかなアニメーション
  • タッチデバイスでも、普通のスライドより滑らか
出来ないこと
思いつかず
タッチデバイスでも滑らかな理由
Julian Shapiro 氏の、 Velocity.js を利用しているため。
Velocity.js ではなく、transition を使えば良いでは?
残念ながら IE8 / 9 が未対応のため、まだ実務では使えない。

 

要点とコード

code

  • Velocity.js を利用するため、slideToggle ではなく、slideDown / slideUp を使っている
  • それ以外は普通のコード

共通コード

 

シンプル ver

  • トリガーは dt、コンテンツ部分は dd
  • トリガー / 閉じるボタン、どちらでも閉じる

 

入れ子 ver

  • リストタグをツリー状にネストする
  • トリガーは .open
  • 理論上は、無限にネストしていくことが可能
  • ナビゲーションで利用することを想定し、閉じるボタンは無し(設置が面倒くさい)

 

横向き ver

  • トリガーは dt、コンテンツ部分は dd
  • 縦向きと違い、1番目はデフォルトで開いていると想定
  • 縦向きと違い、コンテンツ領域が限られるため、開くのは1つのみ
  • 新たに増やす場合は、CSSとJSの width を修正する

 

カスタマイズ

customize

トリガーの見出し部分を背景画像にしたい
CSSで background を指定し、hover と .active も修正する。画像は時代遅れかつ面倒なので、テキストにすべき。
タッチデバイス用に、トリガーの発火を速くしたい
コメントアウトしているコードを使えばOK。
横向き ver をデフォルトで全て閉じた状態にしたい

をコメントアウトする。

 

問題点

Android 4.1 でカクつく
Velocity.js で補正しない状態でも同じなので、これは仕方がない。
スマホで見ると、大して滑らかではない?
Velocity.js 無しの slideToggle などと比較すると、明らかに滑らか。しかし実務でのレガシーIE対応を考慮すると、これが限界。CSS3 transition などを躊躇なく使えるようになれば、ヌルサクアニメーションを実現できるはず。

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 8,924

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。