애니메이션 큐
: 특정 요소에서 발생할 애니메이션 목록
cf.
큐(queue) : FIFO (first in first out)
스택(stack) : FILO (first in last out)
- clearQueue : 큐 비우기
<style>
img{
width: 37px;
height: 21px;
cursor: pointer;
position: relative;
}
</style>
<script>
$(function(){
$('img').click(function(){
$(this).animate({
left:'+=50'
},2000).animate({
width:'+=37'
},2000).animate({
height:'+=21'
},2000);
});
$('button').click(function(){
$('img').clearQueue(); //특정 프로세스 중 클릭 시 해당 프로세스만 수행, 그 다음 프로세스는 큐 삭제됐으므로 수행 못함
});
});
</script>
</head>
<body>
<button>큐 비우기</button> <br><br>
<img src="../images/car_green.jpg" alt="">
</body>
애니메이션 중지
1. stop() = stop(false,false) : 현재 애니메이션 중지
2. stop(true) = stop(true,false) : 현재 애니메이션 중지 + queue 비움
3. stop(clearQueue, gotoEnd)
1) stop(true,true) : 현재 애니메이션 중지 + queue 비움 & 끝(지정한 최종점)으로 이동
2) stop(false,true) : 현재 애니메이션 중지 + queue 안 비움 & 끝으로 이동
<style>
img{
width: 100px;
cursor: pointer;
position: relative;
}
</style>
<script>
$(function(){
var i;
setInterval(function(){
$('img').animate({
left:1000
},2000).animate({
left:0
},2000);
},200);
$('button').click(function(){
i=$(this).index();
switch(i){
case 0:
$('img').stop(); //false, false //큐 안 비워지므로 클릭할 때마다 1-2 애니메이션 번갈아 수행 (클릭할 때마다 반대쪽으로 이동)
break;
case 1:
$('img').stop(true); //true,false //큐 비워져 초기화-> 1번 애니메이션부터 실행 (계속 오른쪽으로)
break;
case 2:
$('img').stop(false,true); //큐 안 지워져 클릭 시 각 끝지점에서 다음 애니메이션 실행 (1-2-1-2)
break;
case 3:
$('img').stop(true,true); //큐 비워지고 바로 끝으로 이동 -> 1번 실행하려고 하나 이미 이동돼있으므로 2번 실행 시점까지 대기
break;
}
});
});
</script>
</head>
<body>
<button>중지</button> <br><br>
<button>중지(큐 비우기)</button><br><br>
<button>중지(큐 비우지말고 끝으로)</button><br><br>
<button>중지(큐 비우고 끝으로)</button><br><br>
<img src="../images/car_purple.jpg" alt="">
</body>
<style>
img{
width: 100px;
cursor: pointer;
position: relative;
}
</style>
<script>
$(function(){
setInterval(function(){
$('img').animate({
left:1000
},2000).animate({
left:0
},2000);
},200);
$('button').click(function(){
var html=$(this).html(); //button에 적힌 함수명 변수에 담음
var evalText = "$('img')."+html; //html=stop() 등
eval(evalText); //매개변수 속 문자열을 코드로 실행시킴
});
});
</script>
</head>
<body>
<button>stop()</button> <br><br>
<button>stop(true)</button><br><br>
<button>stop(false,true)</button><br><br>
<button>stop(true,true)</button><br><br>
<img src="../images/car_purple.jpg" alt="">
</body>
- 예제: each, delay 활용한 애니메이션
<style>
div{
width: 50px;
height: 50px;
background-color: rgb(255, 227, 176);
position: relative;
}
</style>
<script>
$(function(){
$('div').each(function(index){ //각각의 div에 함수 실행
$(this).delay(index*500).animate({ //인덱스 별로 딜레이 다르게 부여-> 실행 시작 다름
left:1000
},'slow');
});
});
</script>
</head>
<body>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</body>
- 예제: 표범 달리기
<style>
img{
width:100px;
position: relative;
margin-bottom: 20px;
}
div{
position:absolute;
top: 30px;
left:1100px;
width: 2px;
height: 400px;
background-color: red;
}
</style>
<script>
$(function(){
var setVal;
$('#start').click(function(){ //시작 버튼
gameStart();
});
$('#set').click(function(){ //초기화 버튼
$('img').css('left',0);
$('.topName').html('');
});
function gameStart(){
setVal=setInterval(function(){ //for 반복문 계속 실행 //clearInterval 위해 변수에 담음
for(var i=0;i<5;i++){
var distance=Math.floor(Math.random()*30)+1;
$('img').eq(i).animate({
left: '+=' + distance //반복문 => 계속 랜덤숫자만큼 보폭 달림
},500);
var goal=$('img').eq(i).css('left'); //left 값 측정
if (parseInt(goal)>=1000){ //px 문자 없앰 //left값이 선 위치값과 동일해지면
clearInterval(setVal); //해당 루틴 중지
alert((i+1)+"번 표범이 결승선에 도착!");
$('.topName').html('=>'+(i+1)+"번 표범 우승");
}
}
},500);
}
});
</script>
</head>
<body>
<p>
<button id="start">출발</button>---<button id="set">제자리로</button>
<span class="topName"></span>
</p>
<img src="../images/표범.gif" alt=""><br>
<img src="../images/표범.gif" alt=""><br>
<img src="../images/표범.gif" alt=""><br>
<img src="../images/표범.gif" alt=""><br>
<img src="../images/표범.gif" alt=""><br>
<div></div>
</body>
- 예제: 이미지 옮기기
<style>
img{
position: relative;
}
</style>
<script>
$(function(){
var posLeft, posTop;
var sw=true;
$('img').on({
mousedown:function(event){
sw=true;
posLeft=event.offsetX;
posTop=event.offsetY;
event.preventDefault();
},
mousemove:function(event){
if(sw){
var x=event.clientX-posLeft; //현재 위치값-기존 위치 좌표값=실제 움직인 거리
var y=event.clientY-posTop;
$(this).css({
left:x,
top:y
});
}
event.preventDefault();
},
mouseup:function(){
sw=false;
event.preventDefault();
}
});
});
</script>
</head>
<body>
<img src="../images/car_purple.jpg" alt="">
</body>
jquery-ui 플러그인 (draggable 메소드 사용)
- 플러그인 적용 후 drag 기능 구현
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery-ui.min.js"></script>
<title>플러그인</title>
<script>
$(function(){
$('img').draggable();
});
</script>
</head>
<body>
<img class="img2" src="../images/car_red.jpg" alt="">
</body>
- +제자리로
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery-ui.min.js"></script>
<title>플러그인</title>
<script>
$(function(){
$('img').draggable({
scroll:false, //스크롤 안에서만 이동
revert:'invalid' //제자리로 cf. true => 다른 위치로 조정 가능
});
$('h1').draggable();
});
</script>
</head>
<body>
<img class="img2" src="../images/car_red.jpg" alt="">
<h1>움직이기</h1>
</body>
- easing 사용
$(선택자).animate(object,speed,easing);
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery-ui.min.js"></script>
<title>플러그인</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
position: relative;
}
img{
position: relative;
width: 300px;
}
</style>
<script>
$(function(){
$('img').click(function(){
$(this).animate({
left:1000
},3000,'easeOutElastic').animate({
left:0
},3000,'easeOutElastic');
});
$('div').click(function(){
$(this).animate({
top:500
},2000,'easeOutBounce');
});
});
</script>
</head>
<body>
<img src="../images/car_red.jpg" alt="">
<div></div>
</body>
'Programming > 국비학원' 카테고리의 다른 글
| 220720 - 제이쿼리 - 실습 예제, 플러그인 예제 (0) | 2022.07.21 |
|---|---|
| 220719 - 제이쿼리 - 실습 예제 (0) | 2022.07.21 |
| 220715 - 제이쿼리 - 애니메이션 (기본 시각 효과, 사용자 정의 효과) (0) | 2022.07.17 |
| 220714- 제이쿼리 - 이벤트 관련 메소드 (trigger, clearTimeout/clearInterval, preventDefault, stopPropagation, on, 마우스, 키보드, 윈도우) (0) | 2022.07.17 |
| 220713 - 제이쿼리 - 메소드(문서객체생성/이동, 이벤트 생성/제거) (0) | 2022.07.14 |
