JavaScript/JQuery

jquery - animation 효과

Bohemian life 2012. 6. 19. 10:51 
<!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   &lt;
			$('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>





저작자표시 비영리 (새창열림)