JQuery - 背景位置が変更された後でアクションを実行

Question

divの背景位置を遷移させて、色を左から右に変更します。イベントが発生したので、どのように私は聞くことができたときに

<div class='event' id='event_1'></div> 
<div class='connector' id='connector_1'></div> 
<div class='event' id='event_2'></div> 

$('#event_2').click(function(){ 
     $('#connector_1').css('background-position', '80px 0px'); 
     myPos = $('#connector_1').css("background-position").split(" "); 
     if(myPos[0] == '100%'){ 
     $(this).css({'background': '#7b9d6f', 'border-color': '#7b9d6f'}); 
     } 
    }); 

myPos戻り[0％、100％]：位置変更が終了したら、私は＃event_2要素の塗りつぶしを変更するためにはJQueryで別のアクションを実行したいですmyPos [0]が100％の場合は？

フィドルあなたはこのようにそれを行うことができますhttps://jsfiddle.net/sL156k3t/

Answer 1

である...

は、それがアクティブ（そのBGCOLORを変更）を作成し、その上に遷移遅延を置くクラスを作成します。

.active{ 
    background: #7b9d6f; 
    border-color: #7b9d6f; 
    transition-property: all; 
    transition-delay: 2s; 
} 

次にあなたがパイプのアニメーションが完了したときに実行されるコールバック関数を使用することができ、この

$('#event_2').click(function(){ 
    $('#connector_1').css('background-position', '80px 0px'); 
    //myPos = $('#connector_1').css("background-position").split(" "); 
    $(this).addClass('active'); 
}); 

LIVE DEMO

Answer 2

ようなあなたのJSで条件を削除します。