1. 이미지에 animation 효과 주기
2. div tag에 애니매이션 주기
3. animation 응용
1. 이미지에 animation 효과 주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{width:65px; height: 65px; background: orange; position:relative;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* $('img').animate({left:'+300px'}, 'fast');// +를 하는 이유는 누적해서 돌릴때
$('img').animate({left:'+100px'}, 'slow');
$('img').animate({width:'50px'}, 'slow');
$('img').animate({height:'100px'}, 'slow');
$('img').animate({top:'300px'}, 'fast');
$('img').animate({top:'100px'}, 'slow'); */
//$('img').animate({left:'300px', width:'300px'}, 'slow');//동시에 하기
//1. 5초 뒤에 앵그리버가 사라지도록...
setTimeout(function(){
$('img').hide();
alert("앵그리버스 숨었다.");
}, 3000);
//2. 7초 뒤에 다시 나타나도록....팝업창 띄우고,,,,"두두두두두두두 짜잔"
setTimeout(function(){
$('img').show();
alert("두두두두두두두두...짜잔");
}, 7000);
});
</script>
</head>
<body>
<img alt="redbird" src="../image/redbird.png">
</body>
</html>
2. div tag에 애니매이션 주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
position: relative;
width: 70px;
height: 40px;
border: 2px solid red;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. 각각의 div해당 영역이 오른쪽으로 500px 천천히 이동
/* $('div').click(function() {
$(this).animate({
left:'500'
},'slow')//중괄호 안에 여러개의 속성을 넣을 수 있습니다.
}) */
//2. hover를 이용해서 오른편 500갔다가. 다시 원래 지점으로 돌아오도록 로직을 작성
/*$('div').hover(function() {
$(this).animate({
left:'500'
},'fast');
}, function() {
$(this).animate({
left:'0'
},'fast');
}); */
//3. 동시에 애니매이션 주기
$('div').click(function() {
$(this).animate({
width:'+=80px',
height: '+=80px'
}, 'slow')
})
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3. animation 응용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Article</title>
<style type="text/css">
#container {
font-size: 1.2em;
margin: 10px 2em;
}
h2 {
font-size: 1.3em;
margin-bottom: 0.5em;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 1.태그가 몇개인지 alert창으로 확인
// alert($('p').length); 확인
// 2. 2번재 p태그를 firstP라는 변수에 할당합니다.
var firstP = $('p:eq(1)');
// alert(firstP.html()); //html()=text()
// 3. a 태그 누르면(a태그중에 class가 more인 선택자)
$('a.more').click(function() {
if (firstP.is(':hidden')) {//토글이랑 상관 없이 모든 태그가 사라져 있냐 없냐를 알고 싶을때 사용할 수 있다.
firstP.slideToggle('slow');
$(this).html('red less');
} else {
firstP.slideToggle('slow');
$(this).html('red more');
}
});
//4.
//글씨 크기 조절(이를 위해서는 현재 font-size를 알아야합니다.)
var speech = $('div.speech');
var defaultSize = speech.css('fontSize');
//alert(defaultSize);
var num = parseInt(defaultSize, 10);
//alert(num);//19
$('#switcher>button').click(function() {
switch (this.id) {
case 'switcher-large':
num += 5;
break;
case 'switcher-small':
num -= 5;
break;
default:
num = parseInt(defaultSize, 10);
}
speech.animate({
fontSize : num + 'px'
}, 'slow');
})
});
</script>
</head>
<body>
<div id="container">
<h2>텍스트 슬라이딩 효과주기</h2>
<div id="switcher">
<button id="switcher-default">default</button>
<button id="switcher-large">large</button>
<button id="switcher-small">small</button>
</div>
<div class="speech">
<p>유은혜 "부천 물류센터 집단감염 심각..등교 중지 불가피"</p>
<p>(세종=연합뉴스) 김수현 기자 = 유은혜 부총리 겸 교육부 장관은 28일 경기도 부천 쿠팡물류센터의 신종
코로나바이러스 감염증(코로나19) 집단감염에 대해 "굉장히 심각하게 보고 있다"며 "부천 (학교의) 등교 중지는 불가피한
조치"라고 밝혔다. 유 부총리는 이날 MBC 라디오 '김종배의 시선집중'에 출연, "부천물 류센터의 경우 직원과 가족,
접촉자 등 검사가 4천여명 이상 진행되고 있는데 무증상자들이 많이 확인되고 있다"며 이같이 말했다. 부천에서는 코로나19
확진 사례가 잇따르면서 전날 예정됐던 고등학교 2학년 이하 251개교의 등교 연기가 결정됐다. 또 인천 부평구와 계양구
관내 유치원과 학교의 경우도 고3을 제외한 243개교에서 이날부터 다음 달 2일까지 등교 수업을 중지하고 원격수업으로
전환하기로 했다. 유 부총리는 전날 561개교에서 코로나19 사태로 등교 수업이 연기된 것과 관련해선 "원칙적으로 학교장이
전체적인 지역 상황을 우선 파악하고, 교육청과 교육부, 방역 당국과 협의해 등교 일정 조정을 협의하고 결정했다"고
설명했다.</p>
<a href="#" class="more">read less</a>
<p>유 부총리는 "당분간은 학생들에게 훨씬 더 많은 지도가 필요할 것"이라며 "이 부분을 지원할 수 있는 인력
3만명 정도를 시도교육청에서 학교마다 배치하고 있다"고 말했다.</p>
<p>그는 학생들의 밀집도를 낮추기 위해 미러링 수업(반을 2개로 나누고 옆 반은 화상 중계하는 수업 방식) 등을
도입한 탓에 사실상 등교 수업이 의미가 없는 것 아니냐는 지적에는 "원격수업만으로 아이들에게 제공하기 어려운 수업이
있다"며 "시간적인 제한은 있어도 그런 부분(대면 지도)들은 우리 학생들에게 꼭 필요한 상황"이라고 강조했다.</p>
</div>
</div>
</body>
</html>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| traversing: parent(), children(), find()-attr(), fadeOut(), fadeIn() (0) | 2020.05.29 |
|---|---|
| preventDefault()-next(), slideToggle(), show(), hide() (0) | 2020.05.29 |
| form fields-select, input, submit (0) | 2020.05.29 |
| prop() (0) | 2020.05.29 |
| submit() (0) | 2020.05.28 |