[jQuery]jQueryを使ったアニメーションの注意事項/スマホにおける:hover
jQueryにおけるアニメーションの注意点
- サムネイルをクリックすると画像が置き換わるような仕組み
- クリックしたときに画像が読み込まれるため、ユーザー側でタイムラグが発生する
- 瞬間に画像を切り替えたいタッチアクションなどでは違和感を生みやすい
- これはユーザーエクスペリエンス上好ましくないため、あらかじめ画像が読み込まれるCSSスプライトを利用したい
- 上の場合、サムネイルをCSSスプライトの画像としクリックされるとjQUeryでcssを書き換えるなどして「ずらして」画像の変化を表現する。
スマホにおける:hoverの問題
スマホ対応ではontouchイベントを使う
- JavaScriptのイベントハンドラ「touchstart/touchend」を使い、タッチ中のみhoverクラスを付与。hover中のCSSを記述する
.bind( 'touchstart', function(){
$( this ).addClass( 'クラス名' );
}).bind( 'touchend', function(){
$( this ).removeClass( 'クラス名' );
}); css
