JS Wait for .CSS to finish

Question

I have some simple JS that changed the background image based on the menu element that is clicked. I'm new to JS so I apologize for my repetitive code. Currently the code works but if a menu item is clicked in quick succession the background change animation cancels out and jumps to the next image without animation. I've tried setting a timeout function and setting a transition timer but no luck. Is there a way I can keep the animation fluent? Below is a portion of my js, I'm no gonna put it all because it essentially the same thing a few times over.

      var counter = 1;

    $(document).ready(function(){
        $(".home-bg").click(function(){
            counter = 1;
            if(counter == 1){
                $(".container").css("background-image", "url(images/1-1.jpg)"); 
                $(".container").css("-webkit-transition", "background 1000ms ease-in-out");
                $(".container").css("-moz-transition", "background 1000ms ease-in-out");
                $(".container").css("-o-transition", "background 1000ms ease-in-out");
                $(".container").css("-ms-transition", "background 1000ms ease-in-out");
                $(".container").css("transition", "background 1000ms ease-in-out");
            }
        });

        $(".service-bg").click(function(){
            counter = 2;
            if(counter == 2){
                $(".container").css("background-image", "url(images/2.jpg)");
                $(".container").css("-webkit-transition", "background 1000ms ease-in-out");
                $(".container").css("-moz-transition", "background 1000ms ease-in-out");
                $(".container").css("-o-transition", "background 1000ms ease-in-out");
                $(".container").css("-ms-transition", "background 1000ms ease-in-out");
                $(".container").css("transition", "background 1000ms ease-in-out"); 
            }
        });
});

score 2 · Accepted Answer · answered Aug 25 '15 at 13:43

2

You need to use the event:

element.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

answered Aug 25 '15 at 13:43

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks for the quick response! I've never used an event listener before, how would I incorporate it into my current js? – Tyharo Aug 25 '15 at 14:00
@Tyharo What should happen when the animation or transition ends? – Praveen Kumar Purushothaman Aug 25 '15 at 14:06
When the animation end the background would have faded into a new image. When a menu item is clicked before the animation is complete the animation cancels but the background changes still. – Tyharo Aug 25 '15 at 14:11
You cannot `animate` or `transition` background image. – Praveen Kumar Purushothaman Aug 25 '15 at 14:20
1

You're correct, currently only Chrome supports background-image transitions. FF and IE do not. – Tyharo Aug 25 '15 at 14:40

JS Wait for .CSS to finish

1 Answers1