IlludiumPu36 IlludiumPu36 - 7 months ago 29
Javascript Question

JQuery - perform action after background-position changed

I am transitioning the background-position of a div to change its colour from left to right. Once the position change has finished, I want to perform another action in JQuery to change the fill of #event_2 element:

<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 returns [0%, 100%] when event is fired, so how can I listen for when myPos[0] is 100%?

Fiddle is at https://jsfiddle.net/sL156k3t/

Answer

You can do it like this...

Create a class that will make it active(change its BGcolor) and put a transition delay on it.

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

Then remove the condition in your JS like this

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

LIVE DEMO