Javascript JS等待.CSS完成

我有一些简单的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"); 
            }
        });
});

---

您需要使用事件：

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

---

谢谢你的快速回复！我以前从未使用过事件侦听器，如何将其合并到当前的js中？@Tyharo动画或过渡结束时会发生什么？动画结束时，背景会褪色为新图像。当在动画完成之前单击菜单项时，动画将取消，但背景仍会更改。您不能

动画

或

转换

背景图像。您是正确的，目前只有Chrome支持背景图像转换。FF和IE没有。