IlludiumPu36 IlludiumPu36 - 6 months ago 13
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>

$('#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


You can do it like this...

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

    background: #7b9d6f;
    border-color: #7b9d6f;
    transition-property: all;
    transition-delay: 2s;

Then remove the condition in your JS like this

    $('#connector_1').css('background-position', '80px 0px');
    //myPos = $('#connector_1').css("background-position").split(" ");