jquery - 自动时间延迟 CSS 横幅

Question

有四张图片，每张图片都必须依次使用时间延迟进行边框效果（css）。例如：

哦哦哦_

5秒后

哦哦哦_ _

5秒后

哦哦哦 _ _

有谁知道怎么做？

Answer 1

如果您必须使用 CSS，那么鉴于下面的 HTML，这是可能的（虽然有点笨拙）：

<div id="timer">
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
</div>​

和CSS：

@-moz-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 24% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

#timer .interval {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
    -moz-animation: loading 20s linear infinite;
    -ms-animation: loading 20s linear infinite;
    -o-animation: loading 20s linear infinite;
    -webkit-animation: loading 20s linear infinite;
    animation: loading 20s linear infinite;
}

#timer .interval:nth-child(1) {
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    -o-animation-delay: 0;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#timer .interval:nth-child(2) {
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    -o-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

#timer .interval:nth-child(3) {
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    -o-animation-delay: 10s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

#timer .interval:nth-child(4) {
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    -o-animation-delay: 15s;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}
​

JS 小提琴演示。

或者，使用 CSS 转换但使用 JavaScript，在本例中为 jQuery（为简单起见）来触发下一步，而不是手动使用和设置animation-delaywith CSS：

function transNext(currentEl, transitionClass) {
    if (!currentEl) {
        return false;
    }
    else {
        transitionClass = transitionClass || 'interval';
        var cur = $(currentEl),
            nxt = cur.next().length ? cur.next() : cur.prevAll(':last');
        cur.removeClass(transitionClass);
        nxt.addClass(transitionClass);

    }
}

$('#timer').on('mozAnimationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd animationEnd', function(e) {
    transNext(e.target, 'interval');
});​

以及修改后的 CSS：

@-moz-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 99% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

#timer div {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
}

#timer .interval {
    -moz-animation: loading 5s linear 1;
    -ms-animation: loading 5s linear 1;
    -o-animation: loading 5s linear 1;
    -webkit-animation: loading 5s linear 1;
    animation: loading 5s linear 1;
}
​    ​

JS 小提琴演示。

Answer 2

可以使用''setInterval'' JavaScript 函数。在此处查看此 JSFiddle以了解它如何工作的示例。

HTML：

<div class="container">
    <div class="marker"></div>
    <div class="marker"></div>
    <div class="marker"></div>
    <div class="marker"></div>
</div>

CSS：

.marker {
    background: #999;
    float: left;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
}

.marked {
    border: 2px solid red;
}

​JavaScript ：

jQuery(function() {
    // Set border around first element
    jQuery('.container .marker:first').addClass('marked');

    // Start interval with 5 second steps
    var iv = setInterval(function() {
        // Executes every 5 seconds

        // Is there a next element?
        if (jQuery('.marker.marked').next('.marker').length == 1) {
            jQuery('.marker.marked')   // actual marked element
                .removeClass('marked') // remove border
                .next('.marker')       // go to next element
                .addClass('marked');   // add border
        } else {
            // No next element? Start again with first element
            jQuery('.marker.marked').removeClass('marked');
            jQuery('.container .marker:first').addClass('marked');
        }
    }, 5000);
});​

从您的问题中不清楚您是想从左到右进行一次运行，还是必须在序列中的最后一张图像之后从左侧重新开始。我的示例在最后一个 div 之后停止。您必须用图像元素替换 DIV 元素。他们只需要具有类''marker''属性。

编辑：上面更新的小提琴/代码循环遍历元素并使用第一个元素再次重复。