CSSクラスの切り替えが速すぎて登録できません。

Question

は、私は次のCSSを持って

<path id="outlineCO" class="state included" [details omitted]/> 

を含み、その上にSVGとHTML5のページを持っている：

.state { 
     fill: #ffff66; 
     fill-opacity: 0.7; 
     stroke: #000000; 
     stroke-width: 1; 
     stroke-opacity: 1; 
    } 
    .state.included { 
     fill: cyan; 
     fill-opacity: 1; 
     transition: fill 2s ease-in; 
    } 
    .state.included.new { 
     fill: magenta; 
     transition: none; 
    } 

要旨は、私の米国のマップ上の状態がデフォルトの背景を持っているということです; 「含まれる」状態には別の背景があります。また、一時的にクラス名「new」を与えても別の背景が得られると述べています。 jQueryのを使用して

私は、Chromeのコンソールで

$("#outlineCO").toggleClass("new"); 

を次のコマンドを実行した場合に予想されるように、私は、マゼンタ、シアンからコロラドの背景色の変更を参照してください。同じコードをもう一度実行すると、コロラドがマゼンタからシアンに2秒間で戻ることがわかります。をもう一度にします。私が実行している場合

しかし、どちらか

$("#outlineCO").toggleClass("new"); $("#outlineCO").toggleClass("new"); 

または

$("#outlineCO").toggleClass("new").toggleClass("new"); 

何も起こりません。色は全体的に青色のままです。要素に「new」を追加したのはが削除された時点でになっていないかのようです。追加が登録される前に一定の時間が経過していますので、状態を瞬時にマゼンタに切り替えてゆっくりとシアンに戻す効果が望ましいでしょうか？

Answer 1

あなたはjQueryのに固執することを望むならば、あなたはまた、期間パラメータ（ミリ秒）を受け入れるのjQuery UIライブラリーからtoggleClass方法を（docsを参照）、使用することができます。

は（期間を1000ミリ秒に設定されている）以下のスニペットを参照してください。

$('#square').toggleClass('new', 1000).toggleClass('new', 1000);

#square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ccc; 
 
} 
 

 
#square.new { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
 
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
 
    crossorigin="anonymous"></script> 
 
<div id="square"></div>