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

안녕하세요. 플입니다.

오늘은 지난 포스팅에 이어서 햄버거 메뉴를 만들어볼게요.

---

 1.  fadeOut()

 

2020/05/06 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 1 - fadeOut()

 

이전 포스팅을 같이 올려둘게요.

---

 2.  animate()

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

일단 전체 코드를 보여드리고 시작할게요.

지난 포스팅에 있었던 fadeOut()도 보이네요. 반가워라

 

바로 아래 animate()로 넘어가 볼게요.

 

$('.mnb button').click(function(){ // 아이콘 클릭할 때
        
        $(this).fadeOut(); // 아이콘 사라진다
        $('.mnb_inner').animate({ // 애니메이션을 넣어서
            marginRight : 0 // 마진 오른쪽을 0만큼 움직인다
        }, 1000 ); // 1초동안
        
    })

주석을 달아보자면 이런 뜻이에요. 하나씩 풀어서 설명해볼게요.

 

 

 $('.mnb_inner') // 이 부분은 선택자에요. 제가 이름 지은 class명이예요.

이미지로 보자면 여기 이 전체 메뉴를 말해요. 이 메뉴가 버튼을 클릭하면 스르륵 나오게 만드는 것이죠.

 

.animate() // 이름 그대로 애니메이션처럼 스르륵하고 움직이는 효과를 줘요.

 

marginRight : 0 // jQuery에서는 -(하이픈)을 안 쓰고 뒤에 오는 단어 앞머리를 대문자로 적어줘요.

                       그거 말고는 css랑 동일한 효과예요. 마진 0만큼 움직이는 거죠.

                       여기서 팁은 css에 미리 마진 -40% 정도를 주는 거예요.

                       꼭꼭 마이너스 값을 넣어주세요. 그래야 화면 밖에서 안쪽으로 움직이거든요.

 

1000 // 애니메이트는 1000이 1초라는 뜻이에요. 그래서 1초 동안 스르륵 하고 움직여서 나타납니다.

---

 3.  적용된 모습 보러 가기

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

shine drop

jQuery는 아무래도 캡처로 보여드리기 어려운 부분이 있어요.

실제 적용된 사이트에서 어떤 동작으로 움직이는지 확인해보세요~

 

---

 4.  햄버거 메뉴 만들기 3

 

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

---

그럼 이만.

총총.