0

ID 名が type1、type2、type3、type4 の 4 つの div があります。最初の div に緑色の背景を与え、2 秒後に次の div の背景が緑色になり、最初の div が通常の背景色に戻るような jquery の助けが必要です。ループを永遠に続ける必要があります。

<div id="type1">
<p>Hey</p>
</div>

<div id="type2">
<p>Hello></p>
</div>

<div id="type3">
<p>Hey again</p>
</div>

<div id="type4">
<p>Hello again</p>
</div>
4

3 に答える 3

1

完全を期すために、これはJavascriptなしで実行できることを指摘したいと思います

を使用してcss animations。

フィドル

マークアップ

<div class="animated"></div>
<div>
<p>Hey</p>
</div>

<div>
<p>Hello></p>
</div>

<div>
<p>Hey again</p>
</div>

<div>
<p>Hello again</p>
</div>

(関連) CSS

.animated
{
    position:absolute;
    top:0;
    background:green;
    z-index:-1;
    animation: move 8s steps(4) infinite;    
}

@keyframes move {
  from { top: 0; }
  to   { top: 400px; }
}
于 2013-07-10T21:06:49.707 に答える
0

DIV にクラス名を付け、「タイプ」と言って、DIV が 10 未満の場合、これは機能します。これは他の場合にも機能しますが、ソート ルーチンを少し変更する必要があります。

orderDivs = $(".type").sort(asc_sort);
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
    return ($(b).attr('id')) < ($(a).attr('id')) ? 1 : -1;    
}
var divSize = orderDivs.length;
var currentDiv = divSize -1;
var lastDiv = orderDivs[divSize-1];
console.log(orderDivs[0]);
function highLightNext() {
    $(lastDiv).css('background-color','transparent');
    currentDiv = (currentDiv+1) % divSize;
    lastDiv = orderDivs[currentDiv]; 
    $(lastDiv).css('background-color','green');
    setTimeout(highLightNext,1000);
}

highLightNext();

jsFiddle へのリンク

于 2013-07-10T20:07:10.430 に答える
0

JQuery を使用してこれを行うことができます。これを行う方法はたくさんあります。

フィドル: http://jsfiddle.net/KnjED/1/

編集： これは無限ループしません（説明を正しく読んでいませんでした）それを修正する作業をしています:)

HTML:

<div class="type">
<p>Hey</p>
</div>

<div class="type">
<p>Hello></p>
</div>

<div class="type">
<p>Hey again</p>
</div>

<div class="type">
<p>Hello again</p>
</div>

CSS:

.green {
    background: green;
}

JQuery:

$(".type").each(function (i) {
    $(this).delay(2000*i).queue(function() { 
       $(this).addClass('green');
         $(this).prev().removeClass('green');
    })
});
于 2013-07-10T20:24:00.657 に答える