JS等待.CSS完成[重复]

Question

我有一些简单的 JS 可以根据单击的菜单元素更改背景图像。我是 JS 新手，所以我为我的重复代码道歉。当前代码有效，但如果快速连续单击菜单项，则背景更改动画会取消并跳转到没有动画的下一个图像。我尝试设置超时功能并设置转换计时器，但没有运气。有没有办法让动画保持流畅？下面是我的js的一部分，我不会把它全部放出来，因为它本质上是一样的。

      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"); 
            }
        });
});

Answer 1

你需要使用事件：

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