[jQuery] 햄버거 메뉴 만들기 3 - fadeIn()

안녕하세요. 플입니다.

오늘은 햄버거 메뉴를 이어서 만들어볼게요.

 

---

 1.  animate()

2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate()

이전 포스팅을 먼저 보고 오면 더 쉬우실 거예요.

 

---

 2.  fadeIn()

$('.exit').click(function(){
        
        $('.mnb button').fadeIn();
        
    })

햄버거 메뉴는 아이콘을 눌렀을 때 메뉴가 나오면서 아이콘이 사라지게 만들어야 해요.

그리고 사라진 아이콘은 메뉴가 없어지면 다시 나타나야 해요.

이번 포스팅에서는 fadeIn()을 이용해 아이콘이 다시 나타나게 만들어볼게요.

 

$('.exit').click(function(){ // x 버튼을 클릭하면
        
        $('.mnb button').fadeIn(); // 아이콘 나오게하기
        
    })

 

 

하나씩 살펴볼게요.

 

$('.exit') // 제가 정한 클래스 이름이에요. 위 이미지의 x 버튼을 가리켜요.

 

.click // 클릭했을 때 어떤 일이 생길지 설정할 수 있어요.

 

function(){} // 함수예요. 함수를 만들고 안쪽에 원하는 동작을 넣을 수 있어요.

                  여기서는 클릭하면 함수에 있는 동작을 실행하게 만들어요.

 

$('.mnb button') // 이건 햄버거 메뉴 아이콘을 가리키는 선택자에요.

 

fadeIn() // 드디어 가장 중요한 fadeIn() 서서히 나타나게 하는 기능이에요. fadeOut()과 반대되는 기능이에요.

 

 

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

shine drop

여기서 적용된 모습을 확인할 수 있어요~!

---

 3.  햄버거 메뉴 만들기 4

 

2020/05/14 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 4 - animate()

 

---

그럼 이만.

총총.