-
Jquery[제이쿼리] delay()메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 28. 21:38
안녕하세요~ 주니주니 입니다.
오늘은 제이쿼리[jquery] delay()메서드를 배워보겠습니다.
오늘은 이렇게 준비해보았습니다.
병신년 새해를 맞이하여 원숭이를 직접 만들어보았습니다.!
허접하지만 귀엽게봐주세요 ㅋㅋㅋ===============================
$('.input1').on("click",function(){
$('img').stop().animate({
'margin-top':'+=100',
'margin-left': '+=200'
},1000);
===============================
class input1가 click되면 <== 실행 버튼입니다.
<img>태그가 animate()메서드를 이용하여 margin값들이 1초동안 증가 하도록하였습니다.
stop()메서드는 연타방지용 으로 넣었답니다.
animate()메서드는 다음에 따로배워보도록 하겠습니다.
※animate()란 새로운 임의의 애니메이션을 생성하는 메서드입니다.
※stop()란 대상의 애니메이션 효과를 정지하는 메서드입니다.실행 버튼을 누른뒤! 원숭이 그림이 이동한 모습입니다.
하지만 처음자리에서 이동하고 못돌아오고있네요 ㅠ_ㅠ===============================
.delay(2000).animate({
'margin-top':'-=100',
'margin-left': '-=200'
},1000);
===============================
delay()메서드를 통하여 2초뒤에
원숭이가 처음있던 자리로 이동하도록 만들어보았습니다.
※delay()란 지정한 시간만큼 대기하는 메서드입니다. (1000당 1초입니다. )
()안에다가 숫자를 넣어주시면된답니다.실행버튼을 누른뒤 원숭이가 이동을 하고!
delay()메서드로 2초뒤에 다시 처음있던자리로 돌아온 답니다.!
오늘은 제이쿼리[jquery] delay()메서드를 배워보았습니다.
새해복많이받으세요.'자바스크립트[JavaScript] > 제이쿼리[Jquery]' 카테고리의 다른 글
Jquery[제이쿼리] animate()메서드 배우기 (0) 2016.11.30 Jquery[제이쿼리] slice() 메서드 배우기 (0) 2016.11.28 Jquery[제이쿼리] :has() 셀렉터 배우기 (0) 2016.11.27 Jquery[제이쿼리]first,first-child,first-of-type셀렉터 배우기 (0) 2016.11.27 Jquery[제이쿼리] :contains 셀렉터 배우기 (0) 2016.11.27