반응형
animate 메서드를 활용해서 이미지를 반복적으로 움직이게 했습니다.
스타일 범위에서 움직이게 하였고, 행위가 끝나고 콜백 함수를 통해서 반복적으로 실행하였습니다.
사용법
$(선택자).animate({스타일 : 값}, 속도 ,콜백 함수);사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, address=no, email=no" />
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
Moving();
});
function Moving() {
$("#up").animate({ marginTop: "40px" }, 200, "", function () {
$(this).animate({ marginTop: "0px" }, 200, "", function () {
Moving(); });
});
}
</script>
</head>
<body>
<div>
<img id="up" src="./img/finger.png" width="90" height="90" />
</div>
</body>
</html>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] 이미지맵 사용하기 / 이미지 좌표 구하기 /이미지 반응형 (rwdImageMaps) (0) | 2022.10.21 |
|---|---|
| [jQuery] 아코디언(accordian) 메뉴, slideUp / slideDown 사용하기 (3) | 2022.10.17 |
| [jQuery] bootstrap(부트스트랩) 레이어 팝업/모달창(modal) 띄우기 (0) | 2022.10.11 |
| [jQuery] 자식 요소 찾기, children() 사용법 / 테이블 행 정보 가져오기 (2) | 2022.10.06 |
| [jQuery] 휴대폰 번호, 전화번호 자동으로 하이픈 넣기 (keyup) (1) | 2022.10.05 |
댓글