저수준의 시각적 효과 jQuery의 기본 효과
시각적 효과 jQuery 기본 효과 메서드 사용법 각 매개 변수의 의미 1. $(selector).method(); 2. $(selector).method(speed); 3. $(selector).method(speed, callback); 각 매개 변수의 의미 speed 효과를 진행할 속도 지정 밀리초 단위의 숫자나 문자열 slow, normal, fast 입력 callback 효과를 모두 완료한 후에 실행할 함수 지정
시각적 효과 toggle( ) 메서드 <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("h1").click(function() { $(this).next().toggle(); }); </script> </head> <body> <h1>OPEN & CLOSE</h1> <div> <h1>Title1</h1> <p>Content1</p> </div> <h1>Title2</h1> <p>Content2</p> </body> </html>
시각적 효과 hide( ) 메서드와 show( ) 메서드 <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("input").eq(0).click(function() { $("div").show(); }); $("input").eq(1).click(function() { $("div").hide(); </script> </head> <body> <input type="button" value="open" /> <input type="button" value="close" /> <h1>OPEN & CLOSE</h1> <div> <h1>Title1</h1> <p>Content1</p> </div> </body> </html>
사용자 지정 효과 animate() 메서드 사용법 1. $(selector).animate(object); 2. $(selector).animate(object, speed); 3. $(selector).animate(object, speed, easing); 첫 번째 변수에 입력 가능한 속성들
상대적 애니메이션 <html> <head> <style> div {width:50px;height:50px;background-color:orange;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(document).ready(function() { $("div").click(function() { var width = $(this).css('width'); var height = $(this).css('height'); $(this).animate({ width:parseInt(width) + 50, height:parseInt(height) + 50 }, "slow"); }); </script> </head> <body> <div></div> </body> </html>
애니메이션 지연 delay() 메서드 <html> <head> <style> div {width:100px;height:100px;background-color:orange;position:relative;} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("div").each(function(index) { $(this).delay(index * 500).animate({ left:500 }, 'slow'); }); </script> </head> <body> <div></div><div></div> </body> </html>