jQuery Effect 예제
<html>
<head>
<title></title>
<link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
//blind
//$("#box").toggle("blind", { direction: "horizontal" }, 1000);
//$("#list").toggle("blind", { direction: "vertical" }, 1000);
//Clip
//$("#box").toggle("clip", { direction: "horizontal" }, 1000);
//Drop
//$("#list").toggle("drop", { direction: "down" }, 1000);
//Explode
//$("#box").toggle("explode",{ pieces: 16 }, 1000);
//Fade
//$("#box").toggle("fade", 1000);
//Fold
//$("#list").toggle("fold",{
// size:10
//}, 1000);
//Puff
//$("#list").toggle("puff", {percent:300}, 1000);
//Slide
//$("#list").toggle("slide", { direction: "up" }, 1000);
//Scale
//$("#box").effect("scale", {percent:200, direction:"horizontal"}, 1000);
//$("#list").effect("scale",{percent:150}, 1000);
//Bounce
//$("#list").effect("bounce", {
// direction:"right",
// distance:100,
// times:5
//}, "fast");
//Highlight
//$("#list").effect("highlight", {color:"black"}, 1000);
//Pulsate
//$("#list").effect("pulsate", {times:10}, "fast");
//$("#list tr").eq(5).effect("pulsate", { times: 100 }, "fast");
//Shake
//$("#box").effect("shake", {times:10}, "fast");
//$("#list tr").eq(2).effect("shake", { times: 10 }, "fast");
//Size
//$("#box").effect("size", {
// to: {
// width: 800,
// height: 50
// }
//}, 1000);
});
//$("td").click(function ()
//{
// $(this).effect("highlight", { color: "red" }, 500);
//});
//$("tr").mouseover(function () {
// $(this).effect("highlight", { color: "red" }, 500);
//});
});
</script>
<style type="text/css">
#box
{
border:1px solid black;
width:200px; height:200px;
background-color:Yellow;
}
h2 {text-align:center;}
#list {margin:0px auto;}
body, p, div, span, li, a, input, th, td
{
font-size:12px;
color:#333333;
}
#list
{
width:500px;
border:1px solid gray;
border-collapse:collapse;
}
#list th, #list td
{
border:1px solid gray;
padding:2px;
}
#list th
{
background-color:Orange;
}
</style>
</head>
<body>
<!--Ex21_effect.htm-->
<input type="button" value=" 테스트 " id="btn1" />
<div id="box"></div>
<h2>자유 게시판</h2>
<div style="margin:0px auto; width:500px">
<table id="list">
<tr>
<th>번호</th>
<th>제목</th>
<th>이름</th>
<th>날짜</th>
<th>조회</th>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
</table>
</div>
</body>
</html>
