2017年2月11日

指定要素に一定間隔（秒）でクラスを付けていく

指定要素（例えば、li 要素など）に一定の間隔（秒数）で順番にクラスを付けていく（addClass）する方法を紹介します。付加されたクラスのスタイルを定義することで、一定間隔で見た目を変化させていくことができます。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
  <li>睦月（むつき）</li>
  <li>如月（きさらぎ）</li>
  <li>弥生（やよい）</li>
  <li>卯月（うづき）</li>
  <li>皐月（さつき）</li>
  <li>水無月（みなづき）</li>
  <li>文月（ふみづき、ふづき）</li>
  <li>葉月（はづき）</li>
  <li>長月（ながつき）</li>
  <li>神無月（かんなづき）</li>
  <li>霜月（しもつき）</li>
  <li>師走（しわす）</li>
</ul>

jQuery

1
2
3
4
5
6
7
8
9
10
11
$(function(){
 
  var s = $('ul li');
  s.each(function(i){
    var t = $(this);
    t.delay(1000*i).queue(function() {
      $(this).addClass('ON').dequeue();
    });
  });
 
});

補足

  • このサンプルでは、指定した ul li 要素に１秒間隔で "ON" というクラスが付加されます。

CSS

1
2
3
4
5
6
7
8
9
ul li {
  padding: 5px 0;
  text-align: center;
  margin-bottom: 5px;
}
 
ul li.ON {
  background-color: #eee;
}

補足

  • "ON" クラスが付いた ul li 要素に背景色を設定しています。これにより、"ON" クラス が付加されたタイミングで背景色が適用されます。

サンプル

「指定要素に一定間隔（秒）でクラスを付けていく」のサンプル

ラベル: ,