君は牛を二頭持っている

渋谷あたりのエンジニアのブログ。OSからウェッブなフロントエンドまでとか色々。

jQueryでaddClass使って詰まった話

半年ぶりの更新.
特にメモしておきたいことだったので,自分の中で整理する意味も含めてのポスト.
端的に言うと,CSSの優先順位の問題に突き当たった訳です.
普段,それなりにCSSいじっておきながら実感することのなかった点ですが,なかなか面倒だったので,今回のケースについて整理.まず,今回の問題が発生した経緯ですが

    • 以下のような感じでjQueryaddClassでdiv要素を点滅させようと試みる(jQueryのバージョンは1.9.1)
(スタイルシート)
.before{
background:blue;
}
.after{
background:red;
}
(スクリプト)
var state = true;
$(document).click(function(){
if(state)
$("#toggle").addClass("after", 300, function(){
$("#toggle").removeClass("before")
});
else
$("#toggle").addClass("before", 300, function(){
$("#toggle").removeClass("after")
});
state = !state;
});
  • 本人的には,クリックする度に赤と青がスムーズに入れ替わって欲しいわけですが,
    実際にはこんな感じになる
    • before(青)->after(赤)はスムーズに変化(意図通り)
    • after(赤)->before(青)は一瞬で変化(何かおかしい)
  • 問題のあるソースコードの部分の流れとしては
    1. 対象の要素に"before"を指定する
    2. 300ms後"after"を除去する
  • では,どうするべきか
    • beforeと全く同じダミー(dummyとする)のクラスをafterの下に追記して以下のようにしてafter->beforeの処理を以下のように変更する
      1. addClass("dummy")&300ms待つ
      2. removeClass("after")
      3. addClass("before")
      4. removeClass("dummy")
      • callbackで繋げれば一応これで多分動きます(非推奨)
    • jQueryUIを使う(ダウンロードして解凍してhtmlファイルぶち込む)
      if(state)
      $("#toggle").switchClass("normal", "warn", 300);
      else
      $("#toggle").switchClass( "warn","normal", 300);
      state = !state;
      • 凄くシンプル!やったね!!(白目)
  • ここまで1時間半

結論:jQueryUI使え
     因みにjQueryUIだとanimateとかも微妙に拡張されて便利になってます

追記:ちょっと不適切だったのでタイトル変更しました