1

無限のアクションを実行するcssアニメーション機能の利点を利用して、毎回異なる値でターゲットとする子を制御し、ある時点でゼロに戻ります。3 つの DIV のグループの背景に色を付けたい場合、CSS コードは次のようになります。

<style>
div:nth-of-type(1){
-webkit-animation:coloring 2s infinite;
}

@-webkit-keyframes coloring{
from {background:red;}
to {background:yellow;}
}
<style>

したがって、無限のプロパティを使用している限り、それは永遠に続きます。ここでは、nth-of-type の値を連続して (1,2,3) ずつ増やしたいと考えており、3 に達すると 1 に戻ります。

4

3 に答える 3

1

これを試して：

HTML:

<div class="div active"></div>
<div class="div"></div>
<div class="div"></div>

CSS:

.active {
    -webkit-animation:coloring 3s;
}

JS:

var len = $(".div").length;
setTimeout(function () {
    change_bg();
},3000);
function change_bg() {
    var index = $(".active").index(); // get index of active div
    var current;
    $(".active").removeClass("active");
    if (index == len - 1) { // check if active div is last
        current = 0; // if last then start from first
    } else {
        current = index + 1; // increment otherwise
    }
    $(".div:eq(" + current + ")").addClass("active"); //change background of next div
    setTimeout(function () { //recursive calling
        change_bg();
    },3000);

}

ここでフィドル。

于 2013-11-11T15:59:31.570 に答える