[jQuery] 햄버거 메뉴 만들기 4 - animate()

안녕하세요. 플입니다.

오늘은 햄버거 메뉴 만들기 마지막 포스팅입니다.

 

---

 1.  fadeIn()

2020/05/12 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 3 - fadeIn()

fadeIn()은 이전 포스팅에서 확인해주세요~

 

---

 2.  전체 코드

$('.mnb button').click(function(){
        
        $(this).fadeOut();
        $('.mnb_inner').animate({
            marginRight : 0
        }, 1000 );
        
    })
    
    
    $('.exit').click(function(){
        
        $('.mnb button').fadeIn();
        $('.mnb_inner').animate({
            marginRight : '-40%'
        }, 1000 );
        
    })

먼저 햄버거 만들기 1부터 전체 코드를 확인해볼게요.

비슷한 코드가 반복되고 있는 걸 알 수 있죠. 오늘은 마지막 부분인 animate() 부분을 할 거예요.

 

---

 3.  animate()

$('.mnb_inner').animate({
            marginRight : '-40%'
        }, 1000 );

애니메이트 부분을 살펴볼게요. 

마진을 -40%로 줘서 화면 밖으로 움직이게 해주는 코드예요.

이미지로 설명하자면 이런 식으로 오른쪽으로 움직입니다.

 

$('.mnb_inner').animate({ // 애니메이션 효과를 준다
            marginRight : '-40%' // 오른쪽으로 -40% 움직인다
        }, 1000 ); // 1초동안

코드를 하나씩 살펴볼게요.

 

$('.mnb_inner') // 선택자를 가리켜요. 메뉴 전체 ul 클래스예요.

 

animate() // 움직이는 동작을 설정할 수 있어요.

 

marginRight : '-40%' // 오른쪽으로 -40%의 마진을 줘요. css와 동일한 효과를 줍니다.

 

1000 // 1000은 시간을 의미해요. 여기서는 1초를 가리킵니다. 즉, 1초 동안 마진 오른쪽으로 -40%로 움직입니다. 

---

 4.  사이트 보러 가기

https://ssimplay.github.io/shinedrop/

shine drop

실제로 동작하는 모습을 사이트에서 확인해보세요~

 

---

그럼 이만.

총총.