jQuery 의 animate 메소드를 사용하면 element 를 다양하게 이동시키고 이동시키는 모습을 화면에 보여줄 수 있다.
animate( properties, [speed], [easing], [callback] )
- properties : element 가 애니메이션이 끝나고 갖게 될 속성(css properties 값)
- speed : 애니메이션의 진행 시간 ( ms 단위 ) 또는 slow, fast, 1000
- easing : 애니메이션이 어떻게 진행될지를 제어하는 기능을 제공하는 선택사항
- callback : 애니메이션이 종료되었을 때 호출되는 메소드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function move(){
$('#moveImg').animate( {left:'150px'}, 1000)
.animate( {left:'50px'}, 500, move);
}
move();
})
</script>
배경 이미지와 움직이게 할 이미지 2개가 있다.
움직이게 할 이미지를 선택하여 1초후에 left 150px 에 있도록 한다.
다음에 0.5초후에 left 50px 에 있도록 한다.
move 는 callback 메소드로 반복 동작을 시킨다.
<script>
var state=true;
$("#button").click(function(){
if(state){
$("#effect").stop().animate({"background-color":"#f90", color:"#fff", width:"420px"}, 1000);
}else{
$("#effect").stop().animate({"background-color":"#f4f4f4", color:"#000", width:"200px"}, 1000);
}
state=!state;
});
</script>
jQuery 버전이 높아지면서 토글함수 기능이 없어져서 토글 처리하는 걸 status 값 true, false 를 이용하여 처리하도록 한 예제다.
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| jQuery 체크박스 선택 여부 확인 (0) | 2018.04.15 |
|---|---|
| Popup Modal with jQuery (0) | 2018.04.12 |
| jQuery addClass() (0) | 2018.02.04 |
| jQuery all Checked (0) | 2018.01.23 |
| [jQuery] 테이블 다루기 (find) (0) | 2018.01.15 |
Link2Me