<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제이쿼리 효과 </title>
<script src="./jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function(){
// < 3 <
$('button:lt(3)').click(function(){
$(this).prev().show(1000, function(){
$(this).addClass('yellow');
});
// 대상.before(내용) , 대상앞에 내용을 추가해라
});
$('button:eq(3)').click(function(){
$('h1') .hide(500, function(){});
});
$('button:eq(4)').click(function(){
// 보였다가 숨겼다가
$('h1').toggle(1000, function(){});
});
// fast : 200, normal : 400, slow: 600
$('button:eq(5)').click(function(){
$('img').slideUp('normal', function(){});
});
$('button:eq(6)').click(function(){
$('img').slideDown('fast', function(){});
});
$('button:eq(7)').click(function(){
$('img').slideToggle('slow', function(){});
});
$('button:eq(8)').click(function(){
$('img').fadeIn('normal', function(){});
});
$('button:eq(9)').click(function(){
$('img').fadeOut('fast', function(){});
});
$('button:eq(10)').click(function(){
$('img').fadeToggle('slow', function(){});
});
$('.opac').change(function(){
$('img').fadeTo('fast', $(this).val() ,function(){}); });
$('#leftButton').click(function(){
$('#img1').animate({marginLeft : -200}, 20);
});
$('#rightButton').click(function(){
$('#img1').animate({marginLeft : 0}, 20);
});
});
</script>
<style>
.yellow{ background-color:#FF9 ;}
h1{display:none; }
#box{ position:relative ; width:200px; height:200px;
overflow:hidden; margin:auto ;
}
#images{ width:400px; height:200px; }
#images img{width:200px; height:200px; }
#direction{width:360px; margin:auto; }
#leftButton{ margin-top:10px ;}
#rightButton{margin-left:250px; margin-top:-20px;}
</style>
</head>
<body>
<h1> 안녕하세요 </h1>
<button> 첫번째 </button>
<h1> 안녕하세요 </h1>
<button> 첫번째 </button>
<h1> 안녕하세요 </h1>
<button> 첫번째 </button>
<button> 숨기기 </button>
<button> 보이기/숨기기 toggle버튼 </button>
<hr />
<button> slideUp()</button>
<button> slideDown()</button>
<button> slideToggle()</button>
<button> fadeIn()</button>
<button> fadeOut()</button>
<button> fadeToggle()</button>
<input type="range" min="0.0" max="1.0" step="0.1" value="0.5"
class="opac" />
<br/>
<div id="box">
<div id="images">
<img id="img1" src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPKRRMatgLqpeOnX9OY_1qhaVF-XWqD1SgoQiSNzhA7CMUAr8Q" />
<img id="img2" src="http://t3.gstatic.com/images?q=tbn:ANd9GcTbED9npyNj-QWPTSUHMkRJ7-VCki5a9mB20wPVQdygQepldlI0Ww" />
</div>
</div>
<div id="direction">
<button id="leftButton"> 왼쪽 </button>
<button id="rightButton"> 오른쪽</button>
</div>
</body>
</html>