1. Animate
Animate 를 활용 하여 기존에 사용할 수 있는 기능들을 Customize 할 수 있다.
$(...).animate({params}, speed, easing, callback);
- Params : css 에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정)
- Speed : 애니메이션이 시작해서 끝날때 까지 걸릴 시간
- Callback : 애니메이션 종료 후 일어날 기능
$(...).stop();
- 진행 중인 내용을 정지 시킨다.
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div{
background-color: blue;
width: 50px;
height: 50px;
margin: 5px;
position: absolute;
left: 5px;
}
</style>
</head>
<body>
<button id="left">◀</button>
<button id="right">▶</button>
<button id="stop">■</button>
<button id="special">★</button>
<button id="step">step</button>
<div id="obj"></div>
</body>
<script>
$('#right').click(function(){
//$('div').animate({'left':'100'},'slow','linear');// 100 까지만 움직임
$('div').animate({'left':'+=500'},5000,'linear');// 100 씩 움직임
});
$('#left').click(function(){
$('div').animate({'left':'-=500'},'slow','linear');// 100 씩 움직임
});
$('#stop').click(function(){
$('div').stop();
});
$('#special').click(function(){
$('div').animate({
left:'+=100',
width:'-=10',
height:'-=10',
opacity:'-=0.3'
},'slow','linear',function(){
alert('animation 끝');
});// 100 씩 움직임
});
// method chaining
$('#step').click(function(){
$('div').animate({left:'+=300'},'slow')
.animate({top:'+=300'},'slow')
.animate({left:'-=300'},'slow')
.animate({top:'-=300'},'slow');
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/img02.jpg">
<!-- CDN(Content Delivery Network) 방식 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#follow{
position: absolute;
}
#obj{
position: absolute;
background-color: green;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div id="obj"></div>
<div id="follow">마우스를 따라다녀요</div>
</body>
<script>
var y = 0;
var x = 0;
$(document).on('mousemove', function(e){
// console.log(e.clientX + '/' + e.clientY);
// 마우스 무브 이벤트는 연속적으로 빠르게 일어나기 때문에 animate 가 필요없다.
y = e.clientY;
x = e.clientX;
$('#follow').css({
top:e.clientY,
left:e.clientX
});
});
$(document).click(function(){
$('#obj').animate({
top:y,
left:x
},'slow', 'swing');
});
</script>
</html>
2. Method Chaining
각 기능들이 연결 된 것처럼 맞물려서 연속적으로 일어남
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div{
position: absolute;
width: 200px;
height: 50px;
top: 200px;
float: left;
}
div.first{
background-color: cadetblue;
}
div.second{
background-color: coral;
left: 220px;
}
div.third{
background-color: darkturquoise;
left: 430px;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
<script>
$('div').on('mouseenter',slideUp);
$('div').on('mouseout',function(){
$(this).off('mouseenter');
$(this).animate({top:200, height:50},'slow','swing',function(){
$('div').on('mouseenter',slideUp);
});
});
function slideUp(){
$(this).animate({top:50, height:200},'slow','swing');
}
</script>
</html>
'J-Query' 카테고리의 다른 글
| 05. 요소 추가, 요소 삭제, 요소 면적 (0) | 2024.03.24 |
|---|---|
| 03. hide & show, Fade effect, Slide (0) | 2024.03.24 |
| 02. Event 등록, GET, SET, CSS, AddClass (0) | 2024.03.24 |
| 01. J-Query의 기초 (0) | 2024.03.11 |
