.active{
background: red;
}
- テスト1
- テスト2
- テスト3
- テスト4
- テスト5
- テスト6
- テスト7
- テスト8
- テスト9
jQuery(function($) {
function addClass(){
var list = $('li');
list.each(function(i) {
console.log($(this));
$(this).delay(300 * i).queue(function(){
$(this).addClass('active').dequeue();
});
});
};
function removeClass(){
$('li').removeClass('active');
};
$('button').on('click', function(){
if($('li').hasClass('active')){
removeClass();
}else{
addClass();
}
});
});
【jquery】addClassを遅延して一つずつ発火させるアニメーションを作る時の注意
2021/01/18