CODEWITHSUNDEEP
jquerycss
IlludiumPu36
IlludiumPu36

Reputation: 4304

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/

Upvotes: 0

Views: 26

Answers (2)

rmondesilva
rmondesilva

Reputation: 1792

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

Upvotes: 1

Ciprianis
Ciprianis

Reputation: 255

You can use a callback function that is run when the animation of the pipe is completed.

Upvotes: 0

Related Questions