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

JS等待.CSS完成

1 个答案: