[Effect] JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fadeTo() 메서드 (= 페이드인 / 페이드아웃 / 페이드토글 / 페이드투) = (천천히 사라짐/나타남)

 

$(selector).fadeOut(speed, callback);

 

---

[매개변수]

speed
선택. 실행 완료에 걸리는 시간.  
3가지료 표현 가능. slow, fast 적을 땐 반드시 따옴표로 묶어줘야 함.

• slow
• fast
• 1/1000 초 (= 밀리초). (1초 = 1000)

callback
선택. (숨기기, 보이기) 완료 후, 실행시킬 함수. (= 콜백함수)

---

[예제]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

<script>

$(document).ready(function(){

    $("button").click(function(){ 

        $("#hz1").fadeOut(); 

        $("#hz2").fadeOut("slow");

        $("#hz3").fadeOut(3000);

    });

});

</script>

<style>

div {width:400px;height:80px;line-height:80px; text-align:center; color:white; display:visible;}

div#hz1 {background-color:red}

div#hz2 {background-color:green}

div#hz3 {background-color:blue}

</style>

<button>서서히 사라져라. 짠!!</button><br><br>

<div id="hz1">홈짱닷컴 (Homzzang.com)</div><br>

<div id="hz2">그누보드 웹초보 가이드</div><br>

<div id="hz3">HTML CSS JAVASCRIPT JQUERY SQL PHP</div>

결과보기

 

$(selector).fadeTo(speed, opacity, callback);

 

---

[매개변수]

speed
선택. 실행 완료에 걸리는 시간.  
3가지료 표현 가능. slow, fast 적을 땐 반드시 따옴표로 묶어줘야 함.

• slow
• fast
• 1/1000 초 (= 밀리초). (1초 = 1000)

opacity
필수. 불투명도. (0 ~ 1) (※ 0: 완전투명 , 1:완전불투명)

callback
선택. (숨기기, 보이기) 완료 후, 실행시킬 함수. (= 콜백함수)

---

[예제]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

<script>

$(document).ready(function(){

    $("button").click(function(){ 

        $("#hz1").fadeTo("slow", 0.2); 

        $("#hz2").fadeTo("slow", 0.5); 

        $("#hz3").fadeTo(3000, 0.8); 

    });

});

</script>

<style>

div {width:400px;height:80px;line-height:80px; text-align:center; color:white; display:visible;}

div#hz1 {background-color:red}

div#hz2 {background-color:green}

div#hz3 {background-color:blue}

</style>

<button>서서히 사라져라. 짠!!</button><br><br>

<div id="hz1">홈짱닷컴 (Homzzang.com)</div><br>

<div id="hz2">그누보드 웹초보 가이드</div><br>

<div id="hz3">HTML CSS JAVASCRIPT JQUERY SQL PHP</div>

결과보기