使用 JQuery 延迟 CSS 背景图像更改答案

【问题标题】：Delayed CSS Background Image Change with JQuery使用 JQuery 延迟 CSS 背景图像更改
【发布时间】：2021-08-09 09:32:23
【问题描述】：

我真的希望我能解释清楚。

我希望/设想动画如何工作

动画是一个转动六次的轮子。在每次停止/旋转时，三角形突出显示mark 应出现在最右侧图标的右侧（如果是时钟，则在 3 点钟）以说明该图标被选中并突出显示文本（文本当前不存在） .

我的问题

虽然我希望它的工作方式目前有效，但是当三角形高亮标记出现时会有延迟，我希望在旋转停止后立即出现。我在下面有一个 JSFiddle 作为示例，尽管您需要将 JSFiddle 中的动画打开到全屏才能看到我的意思。只是为了进一步澄清，请参阅这个非常简短的 video 突出显示我的意思。如果视频有点矫枉过正，我表示歉意，我只是想让我的问题清楚

请注意 JSFiddle 需要全屏打开 JSFiddle

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container animation-banner-container">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="outCircle">
                <div class="rotate">
                    <div class="counterrotate"></div> 
                </div>
            </div>
            <div class="outCircle">
                <div class="imgmap-container">
                    <!-- Image Map Generated by http://www.image-map.net/ -->
                    <img src="https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/inner-circle.png" usemap="#image-map">

                    <map name="image-map">
                        <area target="" alt="one" title="one" href="" coords="702,350,824,276,837,299,846,315,852,330,857,344,861,361,865,372,878,378,890,387,900,396,910,405,918,414,922,423,929,431,934,444,938,456,940,472,940,493,936,509,932,524,921,538,915,549,907,561,890,575,870,583,863,604,854,626,840,657,834,673,828,679,702,609,716,572,724,551,730,522,736,471,729,427,718,378" shape="poly">
                        <area target="" alt="two" title="two" href="" coords="699,608,828,677,816,702,802,722,784,745,764,769,776,791,775,806,774,835,763,864,743,888,716,910,672,920,641,916,606,903,576,873,536,882,480,887,480,737,537,731,587,711,631,685,671,650" shape="poly">
                        <area target="" alt="three" title="three" href="" coords="481,738,480,887,450,885,413,882,384,876,358,894,330,902,290,902,252,885,222,849,209,811,209,784,175,751,150,720,132,694,127,685,253,612,285,654,323,689,354,710,409,729,448,736" shape="poly">
                        <area target="" alt="four" title="four" href="" coords="251,612,125,687,109,653,96,617,87,591,48,574,16,538,2,488,7,452,21,420,44,392,74,377,85,371,101,331,111,311,120,293,126,281,246,351,231,383,222,417,215,457,214,504,226,557" shape="poly">
                        <area target="" alt="five" title="five" href="" coords="125,280,247,352,277,305,310,275,339,255,382,234,413,222,442,218,466,217,476,217,474,76,432,80,406,83,388,86,372,70,341,51,297,46,253,57,225,75,205,104,192,135,192,179,195,192,167,221,146,246" shape="poly">
                        <area target="" alt="six" title="six" href="" coords="475,218,474,76,507,77,548,82,574,50,607,32,642,25,672,28,698,37,722,53,744,74,756,99,765,135,762,165,754,188,782,216,798,235,815,257,826,278,802,292,755,318,713,343,702,349,659,293,622,260,569,235,521,222" shape="poly">
                    </map>
                </div>
            </div><!-- Close Outer Circle -->
        </div>

        <div class="col-lg-6 col-md-12">
            <div class="highlight-container">
            </div>
        </div>

    </div>
</div>

CSS

.animation-banner-container {
    height: 600px;
}

.highlight-container {
    height: 600px;
    background-size: cover !important;
    margin-left: -15% !important;
}

.counterrotate {
    width: 500px;
    height: 500px;
    background: url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/alarm-inner.png');
    background-size: 500px 500px;
    background-repeat: no-repeat !important;
    padding: 150px !important;
}

.rotate {
    width: 500px;
    height: 500px;
    background-size: 500px 500px;
}

.outCircle  {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    z-index: 2;
    pointer-events: none;
}

.imgmap-container{
    position: relative;
    width: 500px !important;
    height: 500px !important;
    z-index: 1;
 }

.imgmap-container img{
    width: 500px;
    height: 500px;
 }

 .img-map area:focus {
    outline: 0 !important;
 }

@keyframes circle-one {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(60deg); }
}

@keyframes circle-two {
    from { transform: rotateZ(60deg); }
    to { transform: rotateZ(120deg); }
}

@keyframes circle-three {
    from { transform: rotateZ(120deg); }
    to { transform: rotateZ(180deg); }
}

@keyframes circle-four {
    from { transform: rotateZ(180deg); }
    to { transform: rotateZ(240deg); }
}

@keyframes circle-five{
    from { transform: rotateZ(240deg); }
    to { transform: rotateZ(300deg); }
}

@keyframes circle-six {
    from { transform: rotateZ(300deg); }
    to { transform: rotateZ(360deg); }
}

@keyframes ccircle-one {
    from { transform: rotateZ(360deg); }
    to { transform: rotateZ(300deg); }
}

@keyframes ccircle-two {
    from { transform: rotateZ(300deg); }
    to { transform: rotateZ(240deg); }
}

@keyframes ccircle-three {
    from { transform: rotateZ(240deg); }
    to { transform: rotateZ(180deg); }
}

@keyframes ccircle-four {
    from { transform: rotateZ(180deg); }
    to { transform: rotateZ(120deg); }
}

@keyframes ccircle-five {
    from { transform: rotateZ(120deg); }
    to { transform: rotateZ(60deg); }
}

@keyframes ccircle-six {
    from { transform: rotateZ(60deg); }
    to { transform: rotateZ(0deg); }
}

Javascript / JQuery

    
    var seconds = 8000;
    var tid = setInterval(mycode, seconds);

    // Deterimes whether to start or stop
    var start = 1;

    // Set to first Slide
    var slides = 1;

    function mycode(val) {
    if(!val) {
        /* Controls the Stop and Start */
        if(start == 0) {
            $(".rotate").css({"animation-play-state": "paused"});
            $(".counterrotate").css({"animation-play-state": "paused"});
            $(".imgmap-container").css({"animation-play-state": "paused"});
            $(".highlight-container").css({"background":"url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/highlight.png')"});
            // Starts the Animation
            start = 1;
        } 
        
        else {
            // Plays Animations
            $(".rotate").css({"animation-play-state": "running"});
            $(".counterrotate").css({"animation-play-state": "running"});
            $(".imgmap-container").css({"animation-play-state": "running"});
            $(".highlight-container").css({"background":"none"});
         
            console.log("Rotating");

            if(slides == 1) {
                console.log("Slide 1");
                /* Animations */
                $(".rotate").css({"animation": "circle-two 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-two 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-two 4s forwards linear"});
                
                // Increments to Next Slide
                slides = slides + 1;
            } 
            
            else if (slides == 2) {
                console.log("Slide 2");
                $(".rotate").css({"animation": "circle-three 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-three 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-three 4s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 3) {
                console.log("Slide 3");
                $(".rotate").css({"animation": "circle-four 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-four 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-four 4s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 4) {
                console.log("Slide 4");
                $(".rotate").css({"animation": "circle-five 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-five 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-five 4s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 5) {
                console.log("Slide 5");
                $(".rotate").css({"animation": "circle-six 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-six 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-six 4s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 6) {
                console.log("Slide 6");
                $(".rotate").css({"animation": "circle-one 4s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-one 4s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-one 4s forwards linear"});
                slides = 1;
            }
            
            // Pauses the Animation
            start = 0;
            
        } // Close else
        /* Close Controls the Stop and Start */

    } 
    
    else {
        abortTimer();
            tid = setInterval(mycode, seconds);
        }
        if(val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 6) {
            slides = val;
            start = 1;
            mycode();
        }
    }

    function abortTimer() { // to be called when you want to stop the timer
        clearInterval(tid);
    }
$(document).ready(function(){
    slides = 1;
    mycode();
});

【问题讨论】：

标签： javascript html jquery css animation

【解决方案1】：

好的，我明白了。基本上是秒数，动画时间需要改变。所以最初我的动画是8000秒，而css forwards change动画是4s。我最终只是更改为 6000 秒和 6 秒，并且效果很好。

JS Fiddle Example

下面的代码变化

    // Seconds between each Animation
    
    var seconds = 6000;
    var tid = setInterval(mycode, seconds);

    // Deterimes whether to start or stop
    var start = 1;

    // Set to first Slide
    var slides = 1;

    function mycode(val) {
    if(!val) {
        /* Controls the Stop and Start */
        if(start == 0) {
            $(".rotate").css({"animation-play-state": "paused"});
            $(".counterrotate").css({"animation-play-state": "paused"});
            $(".imgmap-container").css({"animation-play-state": "paused"});
            $(".highlight-container").css({"background":"url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/highlight.png')"});
            // Starts the Animation
            start = 1;
        } 
        
        else {
            // Plays Animations
            $(".rotate").css({"animation-play-state": "running"});
            $(".counterrotate").css({"animation-play-state": "running"});
            $(".imgmap-container").css({"animation-play-state": "running"});
            $(".highlight-container").css({"background":"none"});
         
            console.log("Rotating");

            if(slides == 1) {
                console.log("Slide 1");
                /* Animations */
                $(".rotate").css({"animation": "circle-two 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-two 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-two 6s forwards linear"});
                
                // Increments to Next Slide
                slides = slides + 1;
            } 
            
            else if (slides == 2) {
                console.log("Slide 2");
                $(".rotate").css({"animation": "circle-three 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-three 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-three 6s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 3) {
                console.log("Slide 3");
                $(".rotate").css({"animation": "circle-four 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-four 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-four 4s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 4) {
                console.log("Slide 4");
                $(".rotate").css({"animation": "circle-five 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-five 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-five 6s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 5) {
                console.log("Slide 5");
                $(".rotate").css({"animation": "circle-six 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-six 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-six 6s forwards linear"});
                // Increments to Next Slide
                slides = slides + 1;
            }

            else if (slides == 6) {
                console.log("Slide 6");
                $(".rotate").css({"animation": "circle-one 6s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-one 6s forwards linear"});
                $(".imgmap-container").css({"animation": "circle-one 6s forwards linear"});
                slides = 1;
            }
            
            // Pauses the Animation
            start = 0;
            
        } // Close else
        /* Close Controls the Stop and Start */

    } 
    
    else {
        abortTimer();
            tid = setInterval(mycode, seconds);
        }
        if(val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 6) {
            slides = val;
            start = 1;
            mycode();
        }
    }

    function abortTimer() { // to be called when you want to stop the timer
        clearInterval(tid);
    }
$(document).ready(function(){
    slides = 1;
    mycode();
});

【讨论】：