jquery - 自動時間遅延 CSS バナー

Question

画像は 4 枚あり、それぞれの画像は時間遅延を使用して順番にボーダー効果 (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 トランジションを使用しますが、CSS を手動で使用して設定するのではなく、JavaScript、この場合は jQuery (簡単にするため) を使用して、次のステップをトリガーしますanimation-delay。

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 hereを見てください。

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

左から右に1回実行するか、シーケンスの最後の画像の後に左から再度開始する必要があるかは、あなたの質問からは明らかではありません。私の例は、最後の div の後に停止します。DIV 要素を画像要素に置き換える必要があります。クラスの「マーカー」属性のみが必要です。

編集:上記の更新されたフィドル/コードは要素を循環し、最初の要素で再び繰り返されます。