HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 무한반복 스크롤하기 [ animate(), slideUp() ]</title>
<!-- 이미지를 클릭하면 왼쪽에서 오른쪽으로 스크롤 되게 하고 싶다.
이미지를 fadeTo() 메소드를 사용하여 이미지를 희미하게 한 후에 특정함수를 실행하고 싶다.
이것을 무한 반복 하려고 한다. -->
<link rel="stylesheet" href="css/03.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/03.js"></script>
</head>
<body>
<img id="fish" src="images/fish.jpg" />
</body>
</html>JS
$(document).ready(function() {
scroll_loop();
}); // end of $(document).ready(function() {})-------------
function scroll_loop() {
/*
선택자.animate(properties
,speed
,callback함수);
-- properties : 선택자(엘리먼트)가 에니메이션이 끝나고 갖게 될 속성을 의미한다.
-- speed : 에니메이션이 완료되어지는 시간으로 단위는 밀리초 이다.
'slow' == 600 밀리초
'normal' == 400 밀리초
'fast' == 200 밀리초
-- callback함수 : 에니메이션이 끝나고 나서 자동적으로 실행되어지는 함수이다.(콜백함수)
*/
$("img#fish").animate({left:600, top:400, width:300, height:240}
,'slow'
,function(){ // callback함수
$(this).fadeTo(1000, 0.0); // $(this) 가 $("img#fish") 이다.
$(this).fadeTo(1000, 1.0);
$(this).animate({left:0, top:0, width:150, height:120}
,'slow'
,scroll_loop);
// 콜백함수
});
}// end of function scroll_loop()--------------------------CSS
@charset "UTF-8";
/* 태그를 이동 시키려면 반드시 position 은 relative; 또는 absolute; 로 설정되어 있어야 한다. */
img#fish {
position: relative;
}정리
- jQueryStudy -> 01_eventHandling -> chap12_animate_fadeTo -> 03_animate_fadeTo_loop.html, 03.js, 03.css
