私は自分のウェブサイトに 3 つの div を設定しています。現在、CSS3 を使用して、背景色を変更して各 div を 5 秒間強調表示しています。したがって、最初の div が 5 秒間ハイライトされ、次に 2 番目、3 番目がハイライトされます。Javascriptで同じことを達成できますか?
私のhtmlは
<a href=""><div class="highlight" id="caption2">
Text1
</div></a>
<a href=""><div class="highlight" id="caption3">
Text2</div></a>
<a href="">
<div class="highlight" id="caption4">
Text3</div></a>
JS
$("div.highlight").each(function (i) {
var $self = $(this);
setTimeout(function () {
$self.removeClass("highlight")
$self.addClass("caption");
setTimeout(function () {
$self.addClass("highlight");
$self.removeClass("caption");
}, 1000);
}, i * 1000);
});
CSS
#caption2 {
position:absolute;
top:10px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption3 {
position:absolute;
top:70px;
left:-20px;
z-index:70;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption4 {
position:absolute;
top:130px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
.highlight {
background-color:#000;
}
.caption {
background-color:#f1583c;
color:yellow;
}