[jQuery] 버튼 누르면 리스트 나오게

안녕하세요. 플입니다.

오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요.

 

---

 1.  준비

이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요.

 

 

저는 구분하기 쉽게 나중에 나타나는 리스트 즉, <li> 태그에 class를 적어주었어요. 

---

 2.  클릭

$(function(){

$('.more').click(function(){  })

});

먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요.

.click()이 클릭 메서드예요.

말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다.

 

클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요.

여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요.

 

.more은 뭔가요? 

.more은 제가 더보기 버튼에 적어둔 클래스 이름이에요. 각자 적어준 클래스나 혹은 태그를 적어주시면 됩니다.

 

jQuery 작업은 가장 바깥에

$(function(){ });를 적어주는 것을 잊지 말아 주세요. 안 그러면 제이쿼리 실행이 안될 거예요.

만약 실행이 안되면 이걸 꼭 확인해주세요.

 

 

---

 3.  나타나기

$(function(){

$('.more').click(function(){
        $('.m_li').fadeIn(1000);
    })

});

 

 

아까 <li> 태그에 적은 클래스명을 기억하시나요? 

그 클래스명을 선택자로 데려와서 fadeIn() 메서드를 적어줄게요.

 

fadeIn() 메서드는 영화 기법과 같은 말인데요 서서히 나오게 만드는 메서드예요.

괄호 안의 숫자는 속도를 지정하는 거랍니다.

 

숫자가 작으면 빨라지고 숫자가 크면 속도가 느려져요. 직접 숫자를 입력해가면서 조절해보세요.

100 단위로 조절하시면 된답니다.

 

 

제이쿼리로 간단하게 목록을 감춰뒀다가 나타나게 만들 수 있어요.

 

제이쿼리인데 움직이는 장면이 없으면 섭섭하죠. 

마지막으로 실행되는 모습으로 마무리할게요.

 

---

그럼 이만.

총총.