jQuery_02 연출
http://www.w3schools.com/jquery/jquery_events.asp
[실행시점 제어하기 - 연출(Event)]
- 특정요소에 마우스 포인터를 올려놓은 시점?
.mouseenter() 서브메뉴, 자식요소까지 | .mouseover() 자기 자신에만
- 특정요소에 마수스 포인터가 벗어나는 시점?
.mouseleave() | .mouseout()
-마우스포인터를 올려놓은 상태에서 해당요소를 클릭할 때?
.mousedown()
-마우스포인터를 올려놓은 상태에서 클릭했다가 땔 때?
.mouseup()
-요소에 초점을 맞춘 상태에서 키보드의 키를 눌렀을 때?
.keydown()
-요소에 초점을 맞춘 상태에서 키보드의 키를 뗄 때?
.keyup()
-입력요소에 초점(focus) 맞았을 때?
.focus()
-입력요소에 초점(blur) 잃었을 때?
.blur()
-입력내용이 변경 되었을 때(textarea,input,select요소)
.change()
-특정요소를 클릭! 하는 시점?
.click()
-특정요소를 두번클릭! 하는 시점?
.dblclick()
-마우스를 움직이는 시점?
.mousemove()
-창크기가 바뀌는 시점?
.resize()
-스크롤 시점?
.scroll()
**모든 이벤트 만들기
.on('이벤트','자식요소',함수(){});
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Basic</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--
header>h1#logo{Interactive Web Design}
section>div.inner>article>h2{jQuery Basic}
footer>address{Copyright © 2016. Ara}
-->
<header>
<h1 id="logo">Interactive Web Design</h1>
</header>
<section>
<div class="inner">
<article>
<h2 id="typo">jQuery Basic</h2>
</article>
</div>
</section>
<footer>
<address>Copyright © 2016. Ara</address>
</footer>
</body>
</html>
------------------------------------------------------------------------------------
script.js
$(document).ready(function(){
$('#typo').mouseover(function(){
$('#typo').css({
transform: 'scale(1.5)',
opacity: '0.5'
});
});
$('#typo').mouseout(function(){
$('#typo').css({
transform: 'scale(1)',
opacity: '1'
});
});
$(window).on('resize',function(){
$('body').css({
backgroundColor: 'hotpink'
});
});
$('#typo').on('click',function(){
$('#logo').css({color:'red'});
$('footer').css({color:'#eee'});
$('body').css({backgroundColor:'#ccc'});
});
});
-----------------------------------------------------------------------------------
[메서드 체인]
.on().on()...
[정말 특별한 변수 - this ]
메서드체인과 this는
jQuery 선택을 한번만 하면 되므로
메모리 사용을 줄임.
------------------------------------------------------------------------------------
http://jqueryui.com/download/#! 커스텀 다운로드
Callback: 두가지 기능 가능하게 해줌
basic.js
$(document).ready(function(){
$('#logo').on('mouseenter',function(){
$(this).css({
fontSize: '100px',
color: '#555'
});
//순서대로 진행해야하며 쓸데없는 띄어쓰기 하면 안 된다.
}).on('mouseleave',function(){
$(this).css({
fontSize: '',
color: 'hotpink'
})
}).on('click',function(){
$(this).css({
color: '#fff'
});
});
});
------------------------------------------------------------------------------------
Effect의 종류
show() | hide() | fadeIn() | fadeOut() | slideUp() | slideDown() | animate() | toggle()
.animate({
애니메이션 적용할 css...
},실행시간,'easing 종류',콜백함수function(){
애니메이션 효과 종료 시 수행할 작업
});
'실행시간'은 (1s==1000ms)로 단위없이 사용함
1000은 1초 / 400은 0.4초
키워드도 있음. ('fast' | 'slow')
'easing의 종류' 기본 'linear','swing'(기본값)
jQuery(JavaScript 라이브러리)
jQueryUI(확장라이브러리)
플러그인
https://jqueryui.com/easing/
http://gsgd.co.uk/sandbox/jquery/easing/
(키워드 입력)
sine | cubic | bounce | elastic | expo
(사용법)
'easeInSine','easeOutSine','easeInOutSine'
'easeInCubic','easeOutCubic','easeInOutCubic'
'easeInBounce','easeOutBounce','easeInOuBouncetBounce'
'easeInElastic','easeOutElastic','easeInOutElastic'
'easeInExpo','easeOutExpo','easeInOutExpo'
(애니메이션 구현 시 주의할 점)
=> 이벤트 횟수만큼 실행됨.
=> 해결방법 .stop().animate() 실행 이전 애니메이션 중단됨.
------------------------------------------------------------------------------------
$(function(){
//애니메이션 효과 구현하기;
$('#typo').on('mouseenter',function(){
// 함수이름 익명함수
$(this).stpo().animate({
opacity: '0.9',
color: '#fd66b2',
fontSize: '100px'
},1000,'easeInBounce');
}).on('mouseleave',function(){
$(this).stpo().animate({
opacity: '1',
color: '#83cae6',
fontSize: '1em'
},1000,'easeOutElastic');
//.css경우 transform 대부분이 적용됨. 하지만 .animate일 경우 지원 안하는 것이 있음.
}).on('click',function(){
//새로운 애니메이션 구현하기(callback함수(){})
/* $('#logo').css({
cursor: 'pointer',
position: 'relative'
}); <- css에서 하쇼*/
$('#logo').on('click',function(){
$('#typo').stop().animate({
top: '-100px'
},function(){
$(this).stop().animate({
top:'300px'
},function(){
$(this).stop().animate({
top: 0
},'easeOutExpo',function(){
$(this).fadeOut(2000);
});
});
});
});
});
/*
[Effect의 종류]
show() | hide() |fadeIn() |fadeOut()
slideUp() | slideDown()
animate() | toggle()*/
/*
.animate({
애니메이션 적용할 CSS...
},실행시간,'easing 종류',function(){
애니메이션 효과 종료 시 수행할 작업
});
'실행시간'은 (1s==1000ms)로 단위없이 사용함
1000은 1초/ 400은 0.4초
키워드도 있어요 ('fast' | 'slow')
'easing 의 종류' 기본 'linear','swing'(기본값)
jQuery(JavaScript 라이브러리)
jQueryUI(확장라이브러리) 연결하면 사용할 수 있는
'easing 종류'
(키워드입력)
sine | cubic | bounce | elastic | expo
(사용법:오타주의!!!)
'easeInSine' ,'easeOutSine', 'easeInOutSine'
'easeInCubic','easeOutCubic', 'easeInOutCubic'
'easeInBounce' ,'easeOutBounce', 'easeInOutBounce'
'easeInElastic' ,'easeOutElastic', 'easeInOutElastic'
'easeInExpo' ,'easeOutExpo', 'easeInOutExpo'
**(애니메이션 구현 시 주의할 점)
=>이벤트 횟수만큼 실행 됨.
=>해결방법
.stop().animate()
*/
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
