본문 바로가기

Skills/Web

Query Basic 9강 - animate(1)

SMALL

소스를 보시죠.

 <!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가 있어야 합니다.

 

결과.

 

LIST

'Skills > Web' 카테고리의 다른 글