Photo by photo_ reflect on Unsplash

---

1. 타겟

💡 금일 타겟 → 섹션1 마무리 , 섹션2 CSS 마크업과 반응형

2. 과정

• setInterval() 문법 → 따옴표 써야함 setInterval("go()",3000);

// setInterval 문법 복습.
var timer = setInterval("go()",3000);

$(".main_slide").hover(function(){
    clearInterval(timer);
},function(){
    timer = setInterval("go()",3000);
})

---

// 기존 코드 

var i_no;
function swing(){
    $(".staff > ul li").eq(i_no).find("i").animate({"top":-10},300);
    $(".staff > ul li").eq(i_no).find("i").animate({"top":0},300);
    $(".staff > ul li").eq(i_no).find("i").animate({"top":-6},300);
    $(".staff > ul li").eq(i_no).find("i").animate({"top":0},300);
    console.log("swing")
}

$(".staff > ul li").hover(function(){
    i_no = $(this).index();
    swing();
    move = setInterval("swing()",1300);
    },function(){
//    여러번 호버시 중복 실행됨.
//    setInterval 진행 중간에 끊어야함.
    console.log("off");
    clearInterval(move);
    return false;
    });

• 파티클 움직임 mouseleave시 바로 정지하기, clearInterval을 사용하면 남아있는 동작을 진행하는데 모두 정지하도록 하기.

  • 호버 여러번 진행시 중복 막기

    // 요소에 finish를 leave에 넣으니 모두 해결됨 
    $(".staff > ul li").eq(i_no).find("i").finish();

3. 피드백

• 제이쿼리 헷갈리는 문법은 복습합니다.

3. 결과

• 섹션2 HTML 완성, CSS부터 진행 필요