jQuery/DOM&jQuery

jQuery hide, show ,fade 애니메이션 메소드

샷타이거 2009. 10. 25. 16:49

jQuery hide, show ,fadeIn, fadeOut 메소드

엘리먼트를 간단히 숨기고,보여주기는 css로도 충분히 가능하다.또 jQuery에서 css()메소드로도 마찬가지다.이에대한 간단한 예부터 보자

어쩌고 저쩌고

위 엘리먼트를 단순히 보이게 안보이게 할려면 다음과 같이 하면 된다.

p{display:none;}
/*안보임*/
p{display:block;}
/*블록 스타일로 보임*/

jQuery에서 css메소드를 이용한것을 보자

#('p').css('display','block');

마지막으로 하나더 있으니 css()메소드가 아닌 hide(), show()를 이용하는것이다. 각 명칭대로 보여주기, 감추기 기능이다.예제를 보자

$('p').show();//보여줌
$('p').hide();//감춤

이같은 것은 어느 방법을 이용하던지 단순히 보여주고 안 보여주고의 기능이다.그럼 애니메이션효과로 가보자

hide(), show()를 이용한 애니메이션

hide(), show()를 좀더 이용하면 애니메이션 효과를 줄수있다.방법은 괄호안에 값을 주는것이다.단위는 1/1000초이다.괄호안에 값을 줌에 따라 나타나고 사라지는 속도가 달라진다. 또 'slow', 'nomal' ,'fast'를 주어 속도를 줄수도있다.그속도는 아래예제를 보자

$('p').show(350)
//1000분의 350초 속도로 나타남
$('p').show('slow')
//0.6초
$('p').show('nomal')
//0.4초
$('p').show('fast')
//0.2초

fadeIn(), fadeOut()를 이용한 투명 애니메이션

fadeIn(), fadeOut()을 이용하면 나타남과 사라짐에 투명도를 줄수있다.괄호안에 값은 hide(), show()와 같다.

$('p').fadeIn(350);
$('p').fadeOut('fast');

클릭이벤트로 간단한예제

이제까지 설명한것으로 클릭을 통한 예제를 만들어보겠다. 버튼이란 글자를 클릭하면 바로나타나는 엘리먼트, 그리고 천천히나타나는 엘리먼트. 그리고 투명하게 사라지는 엘리먼트를 구현해 보겠다.

먼저 소스에는 h3엘리먼트를 버튼으로 그리고 각각 일어날 애니메이션에 아이디를 주었다.

버튼


클릭하면 바로 나타난다


클릭하면 천천히나타난다.


클릭하면 페이드효과로 투명하게 사라진다.

스크립트를 보자.설명은 소스에 각개 자세히 해놓았다.

$(document).ready(function(){
  //문서이벤트
    $('#gamma, #zeta').hide();
   // #gamma, #zeta 이란 두아이디에 접근하고 감추어 둔다.
     $('h3 a').click(function(){
       //h3 a 즉 버튼이라는 글자를 클릭했을떄
			$('#gamma').show();	
            //#gamma아이디의 엘리먼트를 보여줌
			$('#zeta').show(350);
            //#zeta아이디의 엘리먼트를
              350/1000초의 속도로보여줌
			$('#fader').fadeOut(900);
            //#fader아이디의 엘리먼트를
             900/1000초의 속도로 투명하게 숨김
		return false;
        //false값을 주어 기본동작 
        //즉 $('#gamma, #zeta').hide();이 일어나지않도록함
	 });
});

위의것을 적용한 예제는 여기로http://sianasiatiger.cafe24.com/study/J_display.html

저작자표시