순차적으로 선택되는 animation

위 이미지처럼 setInterval 을 이용하여 차례대로 선택이 되는 애니메이션을 만들어보자

<div class="sequenBox">
        <ul>
            <li class="on">sequen1</li>
            <li>sequen2</li>
            <li>sequen3</li>
            <li>sequen4</li>
            <li>sequen5</li>
        </ul>
   </div>

js로 구현하기

function sequen() {
            let rollingitem = $('.sequenBox ul');
            if (rollingitem.find('li:last-child').hasClass('on')) {
                rollingitem.find('li:first-child').addClass('on').siblings('li').removeClass('on');
            } else {
                rollingitem.find('li.on').next('li').addClass('on').siblings('li').removeClass('on')
            }
        }

        setInterval(sequen, 500)

제이쿼리로 구현하기

let rollingitem = $('.sequenBox ul li');
    let num = -1;

    function sequen(){
        num++;
        rollingitem.removeClass('on');
        rollingitem.eq(num).addClass('on');
        console.log(num);
        if(num > 3){
            num = -1;
        }
    }

    setInterval(
        sequen,500
    )