Jquery[제이쿼리] fadeIn,fadeOut,fadeTo,fadeToggle 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] fadeIn,fadeOut,fadeTo,fadeToggle 메서드를 배워보겠습니다.

위화면처럼 셋팅해주세요~

실행화면입니다. 이제 시작해볼까요.

===============================
$('.b1_h').click(function(){$('.div1').fadeOut();});
===============================
class이름이 b1_h가 click하면 class이름이 div1가 fadeOut() 하라입니다.
※fadeOut()는 선택된 요소를 불투명하게 만들어 서서히 사라지게하는 효과입니다.
일반적으로는 fadeOut(속도,호출할함수) 사용합니다.
※속도는 1000의 값이 1초의 값이므로 몇초만에 사라지게 할것인지 값을 입력하시면됩니다.
※호출할함수는 function(){} <== 실행할다음 무엇을 할것인지를 코딩하면됩니다.



===============================
$('.b1_s').click(function(){$('.div1').fadeIn();});
===============================
※fadeIn()는 선택된 요소를 불투명하게 만들어 서서히 나타나게하는 효과입니다.
일반적으로는 fadeIn(속도,호출할함수) 사용합니다.



=============================== 
$('.b2').click(function(){$('.div2').fadeTo(2000,0);});
===============================
※fadeTo()는 선택된 요소의 불투명도를 조절하는 메서드입니다.
일반적으로는 fadeTo(속도, 0 ~ 1사이의 투명도를 입력, 호출할함수) 사용합니다.
즉 fadeTo()메소드는 fadeIn(),fadeOut() 랑은 다르게 불투명도만 조절하는 메소드이기때문에
효과를 주더라도 화면에서는 불투명도만 낮아지므로 자리를 차지하게됩니다.





===============================  
$('.b3').click(function(){$('.div3').fadeToggle(3000);});
===============================
※fadeToggle()는 선택된 요소의 불투명도를 조정하여 숨기거나 보이게 합니다.
저번에 배운 Toggle()의 업글판이라고 생각하시면됩니다.
일반적으로는 fadeToggle(속도,호출할함수) 사용합니다.

실행하면 그대로입니다!

div1 사라져랏! 버튼을 누르면! div1가 사라진모습입니다.
div1 보여랏! 버튼을 누르면 div1가 보이겠죠?

이번에는 div2 fadeTo 버튼을 눌럿습니다.
div2가 안사라지고 2초만에 불투명도만 낮아져 공간을 차지하고 있습니다.

이번에는 div3 fadeToggle 버튼을 눌러보니 
fadeToggle(3000) <== 3000의 값을 주었기때문에 3초만에 
사라지고/보여지고 하는걸 확인할수있습니다.

오늘은 제이쿼리[jquery] fadeIn(),fadeOut(),fadeTo(),fadeToggle() 메서드를 배워봤습니다.
그럼다음에또만나요~