애니메이션 효과
- show( ) : 이미지가 커지면서 나타나는 효과
$(function(){
// 이벤트 연결
$('#btn1').on('click',function() {
// show() 속도값 : fast(200), normal(400), slow(600) - 밀리세컨드로 지정 가능
$('#dog').show('slow',function() { // 태그가 완전히 보여지면 함수가 호출됨
alert('노출 완료');
});
});
});
<body>
<button id="btn1">Show</button>
<button id="btn2">Hide</button>
<button id="btn3">Toggle</button>
<br>
<img
id="dog" src="../images/dog.png" width="120" height="100" style="display:none;">
</body>
- hide( ) : 이미지가 작아지면서 숨겨지는 효과
$(function() {
// 이벤트 연결
$('#btn2').on('click',function() {
$('#dog').hide(1000,function() { // 태그가 완전히 안보여지면 함수가 호출됨
alert('숨김 완료');
});
});
});
- toggle( ) : 이미지를 나타내거나 숨기는 효과
$(function() {
// 이벤트 연결
$('#btn3').on('click',function() {
$('#dog').toggle('show');
});
});
$(function() {
// 이벤트 연결
$('#btn1').on('click',function() {
$('#dog').fadeIn('slow');
});
});
<body>
<button id="btn1">fadeIn</button>
<button id="btn2">fadeOut</button>
<button id="btn3">fadeToggle</button>
<div>
<img id="dog" src="../images/dog.png" width="120" height="100" style="display:none;">
</div>
</body>
$(function() {
// 이벤트 연결
$('#btn2').on('click',function(){
$('#dog').fadeOut(1000);
});
});
- fadeToggle( ) : 페이드인 하거나 페이드 아웃하는 효과
$(function() {
// 이벤트 연결
$('#btn3').on('click',function() {
$('#dog').fadeToggle('fast');
});
});
- fadeTo( ) : 투명도를 설정하여 페이드 효과
$(document).ready(function(){
// 이벤트 연결
$('#btn1').on('click',function() {
$('#dog').fadeTo('slow',0.3);
});
$('#btn2').on('click',function() {
$('#dog').fadeTo('show',1);
});
});
<body>
<button id="btn1">불투명도(30%)</button>
<button id="btn2">불투명도(100%)</button>
<br>
<img id="dog" src="../images/dog.png" width="120" height="100">
</body>
- slideUp( ) : 아래부터 올라가면서 숨겨지는 효과
$(function() {
// 이벤트 연결
$('#btn1').on('click',function() {
$('h1').slideUp(1000);
});
});
<body>
<button id="btn1">slideUp</button>
<button id="btn2">slideDown</button>
<button id="btn3">slideToggle</button>
<h1>내용</h1>
</body>
- slideDown( ) : 위부터 내려가면서 보여짐
$(function() {
// 이벤트 연결
$('#btn2').on('click',function() {
$('h1').slideDown('slow');
});
});
- slideToggle( ) : 슬라이드 효과 토글
$(function() {
// 이벤트 연결
$('#btn3').on('click',function() {
$('h1').slideToggle('fast');
});
});
- animate( {애니메이션 속성} , '효과속도' , 콜백함수 ) : 애니메이션 효과
- 애니메이션 속성 : 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력
$(document).ready(function() {
$('h1').animate({marginLeft:'250px'},5000,function() {
alert('도착 완료!');
});
$('h2').animate({
marginLeft: '250px',
opacity: 0.3,
width: '100px',
height:'100px'
},5000);
$('h3').animate({
marginLeft: '250px'
},3000).animate({
marginLeft: '100px'
},2000);
});
<body>
<h1>내용</h1>
<h2>내용</h2>
<h3>내용</h3>
</body>