jquery 기본 효과(시각)
show() 문서 개체를 크게 하며 보여줌
hide() 문서 객체를 작게 하며 사라지게함
toggle() show() 메서드와 hide() 메서드를 번갈아 실행함
slideDown() 문서 객체를 슬라이드 효과와 함께 보여줌
slideUp() 문서 객체를 슬라이드 효과와 함께 사라지게 함
slideToggle() slideDown() 메서드와 slideUp() 메서드를 번갈아 실행
fadeIn() 문서 객체를 선명하게 하며 보여줌
fadeOut() 문서 객체를 흐리게 하며 사라지게 함
fadeToggle() fadeIn() 메서드와 fadeOut() 메서드를 번갈아 실행
사용형태
1. $(selector).method();
2. $(selector).method(speed);
3. $(selector).method(speed, callback);
4. $(selector).method(speed, easing, callback);
speed : 효과를 진행할 속도를 지정함 밀리초 단위의 숫자나 문자열 ( show,normal,fast) 입력
callback : 효과를 모두 완료한 후에 실행할 함수를 지정함
easing : 애니메이션의 easing 속성을 지정함 별도의 플러그인을 사용하지 않으면 문자열 linear와 swing만 입력 가능
<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
//1 클릭에 이벤트와 토글 사용
/*$('h3').click(function(){
$(this).next().toggle('slow',function(){
alert("effect end.");
});
})*/
//2. 1번과 비슷하지만 다르게 구현하기 (클릭 제거 ,자동실행 )
$('h3').toggle(function(){
$(this).next().show('slow');
},function(){
$(this).next().hide('slow');
});
});
</script>
</head>
<body>
<h3>OPEN & CLOSE </h3>
<div>
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<h3>OPEN & CLOSE </h3>
<div>
<h3>Lorem ipsum</h3>
<p>Aenean vel augue dolor, at rhoncus tortor.</p>
</div>
</body>
</html>
-사용자 지정 효과 animate()
animate() 사용자 지정 효과를 생성함. style 속성을 동적으로 변경하는 메서드임
1. $(selector).animate(object);
2. $(selector).animate(object,speed);
3. $(selector).animate(object,speed,easing);
4. $(selector).animate(object,speed,easing,callback);
object : 지정할 수 있는 속성이 있음(opacity, height,top,width,left,margin,right,padding,bottom)
-예제 도형 작아짐
<!DOCTYPE html>
<html>
<head>
<!--animate를 사용하려면 position 속성이 absolute나 relative여야 함-->
<style>
div{ width: 50px;height: 50px; background-color: yellow; position: relative;}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').toggle(function(){
$(this).animate({left:500},'slow');
},function(){
$(this).animate({left:0},'slow');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
-상대적 애니메이션
현 스타일 속성 정보를 알아내서 상대적으로 애니메이션 효과를 넣는 것을 의미함
-예제 div(사각형) 클릭 할 때 마다 커짐
<!DOCTYPE html>
<html>
<head>
<!--animate를 사용하려면 position 속성이 absolute나 relative여야 함-->
<style>
div{ width: 50px;height: 50px; background-color: yellow; }
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').click(function(){
//현상태의 스타일 속성 추출
var width = $(this).css('width');
var height = $(this).css('height');
$(this).animate({width:parseInt(width)+50,height: parseInt(height)+50},'slow');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
위 예제랑 동일한 상대적으로 변경하는 방법 += 사용!!
<!DOCTYPE html>
<html>
<head>
<!--animate를 사용하려면 position 속성이 absolute나 relative여야 함-->
<style>
div{ width: 50px;height: 50px; background-color: yellow; }
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').click(function(){
//현상태의 스타일 속성 추출
var width = $(this).css('width');
var height = $(this).css('height');
$(this).animate({width:'+=50',height: '+=50'},'slow');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
효과는 계속 큐에 쌓여 있다가 쌓인 순서대로 실행함 .
큐에 있는 효과 제거를 위해서는 clearQueue()를 사용하면 됌
- 애니메이션 큐 제거 clearQueue()
$('div').clearQueue()
- 애니메이션 정지 stop()
1. $(selector).stop() 입력하지 않으면 모두 false 입력으로 간주
2. $(selector).stop(clearQueue);
3. $(selector).stop(clearQueue,goToEnd); 매개변수 모두 입력하지 않으면 모두 false 입력으로 간주
clearQueue가 true 이면 clearQueue() 함수 실행한 것과 동일하게 반응함.
goToEnd를 True로 할 경우 지정한 곳에서 정지하는게 아니라 지정한 최종 형태에서 멈춤
<html>
<head>
<style>
div { width: 100px;height: 100px;
background-color:yellow;position: relative;}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('button').click(function(){
var html=$(this).html();
//html 값은 각각 stop() stop(true) stop(false,true)
//즉 $('div').stop()
//이런식으로 넘어온다 즉 효과 정지 시키는 거임
var evalText = "$('div')."+html;
eval(evalText);
});
//네모(div)가 오른쪽으로 이동할때 버튼을 누르면
//stop()은 오른쪽으로 이동하는 것을 멈추고 제자리에서 바로 왼쪽으로 이동
//stop(true) 오른쪽으로 이동하는 것을 멈추고 다음 인터발이 실행 될떄까지 대기
//stop(false,true) 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고 바로 왼쪽으로 이동
//stop(true,true) 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고 다음 인터발까지 대기
setInterval(function(){
$('div').animate({
left:'500'
},1000).animate({
left:'0'
},1000);
},2000);
});
</script>
</head>
<body>
<button>stop()</button> <!---->
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div></div>
</body>
</html>
- 애니메이션 지연 delay()
큐에 있는 명령을 정해놓은 시간동안 딜레이 시킴
<html>
<head>
<style>
div { width: 100px;height: 100px;
background-color:yellow;position: relative;}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
네모 순차적으로 이동
