728x90
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery - animation effect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
background: #f4f4f4;
line-height: 1.5em;
}
header {
background: #333;
color: white;
padding: 20px;
text-align: center;
border-bottom: 4px solid black;
margin-bottom: 10px;
}
#container {
width: 90%;
margin: auto;
padding: 10px;
}
#box {
background: #333;
color: white;
width: 400px;
height: 90px;
padding: 40px;
text-align: center;
}
#box2 {
margin-top: 20px;
position: relative;
background: #333;
color: white;
width: 100px;
height: 100px;
padding: 10px;
background: cover;
background-image: url("https://media.giphy.com/media/LT1Pq74cXuNQxyUmLk/giphy.gif");
}
</style>
</head>
<body>
<header>
<h1>jquery animation</h1>
</header>
<div id="container">
<button id="btnFadeOut">Fade Out</button>
<button id="btnFadeIn">Fade In</button>
<button id="btnFadeTog">Fade Toggle</button>
<hr>
<div id="box">
<h1>페이드 효과 연습</h1>
</div><br>
<button id="btnSlideUp">슬라이드 업</button>
<button id="btnSlideDown">슬라이드 다운</button>
<button id="btnSlideTog">슬라이드 토글</button>
<button id="btnSlideStop">슬라이드 멈춤</button>
<hr>
<div id="box">
<h1>페이드/슬라이드 효과</h1>
</div>
<br>
<hr>
<button id="moveLeft">이동-왼쪽</button>
<button id="moveRight">이동-오른쪽</button>
<button id="moveAround">이동-어라운드</button>
<div id="box2"></div>
<br>
</div>
<script>
//효과 : Fade Out / In / Toggle
$(document).ready(function () {
$('#btnFadeOut').on('click', function () {
$('#box').fadeOut(2000, function () {
$('#btnFadeOut').text('사라짐');
});
})
$('#btnFadeIn').on('click', function () {
$('#box').fadeIn(2000); // 사라지는 동안 걸리는 시간
});
$('#btnFadeTog').on('click', function () {
$('#box').toggle(2000); // 사라지는 동안 걸리는 시간
});
//효과 : Slide Up / Down / Toggle /Stop
$('#btnSlideUp').on('click', function () {
$('#box').slideUp(3000);
});
$('#btnSlideDown').on('click', function () {
$('#box').slideDown(3000);
});
$('#btnSlideTog').on('click', function () {
$('#box').slideToggle(3000);
});
$('#btnSlideStop').on('click', function () {
$('#box').stop(3000); //stop 소문자 주의
});
//효과 : 이동
$('#moveRight').on('click', function(){
$('#box2').animate({
left: 400
})
});
$('#moveLeft').on('click', function(){
$('#box2').animate({
left: 0
})
});
$('#moveAround').on('click', function(){
let box = $('#box2');
box.animate ({
left: 300
});
box.animate ({
top: 200,
opacity: 0.2
});
box.animate ({
left: 300,
opacity: 1,
width: '300px',
height: 300
});
box.animate ({
left: 0,
width: 100,
height: 100
});
box.animate ({
top: 0
});
});
});
</script>
</body>
</html>
728x90
728x90
'Javascript > JQuery' 카테고리의 다른 글
| 오류: 다른 요소(element)도 같이 선택되는 문제 (1) | 2019.12.05 |
|---|---|
| jQuery (5) Ajax 기술 사용해서 json 파싱하기 (0) | 2019.07.03 |
| jQuery (3) 돔 (DOM) (0) | 2019.06.28 |
| jQuery (2) 제이쿼리 이벤트 (0) | 2019.06.28 |
| jQuery (1) 제이쿼리 정의, 역사, 개요 (0) | 2019.06.28 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
