애니메이션를 지연하고 싶다면 delay 메소드를 이용하면 됩니다. 사용 방법은
소스를 보시면 바로 알 수 있습니다.(첫번째 파라미터가 delay 되는 시간 ms단위)
아래 소스중 each 메소드는 요소만큼 반복하는 메소드입니다. 각 인덱스는
index 파라미터에 의해서 알수있구요.
소스
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 100px;
background-color: orange;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('div').each(function (index){
//(index * 500)초 후 animate() 메서드를 실행합니다.
$(this).delay(index * 500).animate({
left: 500
}, 'slow');
});
});
</script>
</head>
<body>
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</body>
</html>
실행화면
'프로그래밍 > Jquery' 카테고리의 다른 글
| Jquery -$ajax 크로스 도메인 문제 해결 방법 (0) | 2014.12.29 |
|---|---|
| Jquery - $.ajax() 메서드의 옵션 (0) | 2014.12.28 |
| jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더) (0) | 2014.12.21 |
| jquery - Jquery UI Effect 플러그인 사용법 (0) | 2014.11.02 |
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |