소스를 보시죠.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>RintIanTta JQuery Lesson 1</title> <style type="text/css"> .li { position:relative; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> var isShow = false; $(document).ready(function () { $("ul li").toggle(first, second); });
function first(){ $(this).animate({ left: 200 }, "slow");
}
function second(){ $(this).animate({ left: 0 }, "slow"); } </script> </head> <body> <ul> <li><h1>Click it</h1></li> <li><h1>Click it</h1></li> <li><h1>Click it</h1></li> <li><h1>Click it</h1></li> </ul> </body> </html> |
$().animate()를 사용해줍니다.
첫 번째 파라메터로는 변경될 내용을 적어주시고
두 번째 파라메터로는 속도를 적어주시면 됩니다.
속도는 "fast", "slow" 가 있고, 숫자를 입력해주셔도 됩니다.
animate()를 사용할실때에는 CSS에 position 이 Relative 또는 Absolute가 있어야 합니다.
결과.
'Skills > Web' 카테고리의 다른 글
| jQuery Basic 11강 - slideUp() & slideDown() (0) | 2014.01.13 |
|---|---|
| jQuery Basic 10강 - fadeIn() & fadeOut() & fadeTo() (0) | 2014.01.13 |
| Query Basic 8강 - Toggle() (0) | 2014.01.13 |
| JQuery Basic 7강 - show() & hide() (0) | 2014.01.13 |
| jQuery Basic 6강 - Event (0) | 2014.01.13 |