computer/JQuery

jQuery fadeIn, fadeOut, fadeTo 예제

Choi May 2014. 5. 24. 16:12

출처 : http://www.w3schools.com/jquery/jquery_fade.asp  

함수 옆에 써있는 주소로 가면 직접 결과물을 확인 하실 수도 있습니다.^^


fadeIn   :   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

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

    $("#div1").fadeIn();

    $("#div2").fadeIn("slow");

    $("#div3").fadeIn(3000);

  });

});

</script>

</head>


<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button>

<br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>


</body>

</html>




fadeOut   :   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

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

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

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

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

  });

});

</script>

</head>


<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button>

<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>

</html>




fadeToggle   :    http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

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

    $("#div1").fadeToggle();

    $("#div2").fadeToggle("slow");

    $("#div3").fadeToggle(3000);

  });

});

</script>

</head>

<body>


<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button>

<br><br>


<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>

</html>




fadeTo   :   http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

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

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

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

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

  });

});

</script>

</head>


<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button>

<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>

</html>