참고 사이트:
이벤트 스타일 확인 http://jqueryui.com/easing/
애니메이션 효과(animation) 1: hide, show
- 라이브러리 파일들을 위 사이트에서 다운받아야만이 위 효과를 줄 수 있음.
- api사전과 적용사례를 보면서 효과를 선택 및 적용
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>show()_hide()</title>
<style>
#imgWrap
{
border:1px #000000 solid;
width:220px;
height:220px;
text-align:center;
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script>
// easing 플러그인 다운 http://gsgd.co.uk/sandbox/jquery/easing/
// 라이브러리 파일들을 위 사이트에서 다운받아야만이 위 효과를 줄 수 있음.
var $imgWrap; // img 태그를 포함하는 태그
$(document).ready(function(){
$imgWrap = $("#imgWrap");
$("#btn_hide").bind("click", onHide);
$("#btn_show").bind("click", onShow);
$("#btn_toggle").bind("click", onToggle);
});
function onHide(){
// 위 사이트에서 예제를 보면서, hide되는 스타일을 고를 수 있음
$imgWrap.hide(3000, "easeOutExpo", function(){
alert("hide");
});
}
function onShow(){
$imgWrap.show(3000, "easeOutExpo", function(){
alert("show");
});
}
function onToggle(){
$imgWrap.toggle(3000, "easeOutCubic", function(){
alert("toggle");
});
}
</script>
</head>
<body>
<div id="imgWrap">
<img id="img1" src="images/img1.jpg">
</div>
<div>
<button id="btn_show">show</button>
<button id="btn_hide">hide</button>
<button id="btn_toggle">toggle</button>
</div>
</body>
</html>
애니메이션 효과(animation) 2: 메뉴, 서브메뉴 활용한 show, hide
- 잠깐 팁
menu_list 안의 바로 밑에 있는 자식객체로 설정 (>) 하지않으면 그안에 있는 li 전부포함하게됨
$(".menu_list li")는 클래스명이 menu_list 인 모든 li태그를 선택하는 선택자
$(".menu_list > li")는 클래스명이 menu_list 인 바로 아래 자식 li태그를 선택하는 선택자
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>showHide_Menu</title>
<style>
body,p,img,ul,li{
margin:0px; padding:0px; list-style:none; border:none;
}
div#top_bg{
width:100%; height:30px; background:#2c2c2c;
}
div#top{
width:980px; height:30px; margin:0px auto; background:#2c2c2c;
}
ul.top_list{
float:right; margin-top:3px;
}
div#menu_bg{
width:100%; height:80px; background:#edeef0;
}
div#menu{
width:980px; margin:0px auto; background:#edeef0; position:relative; left:0px; top:0px;
}
span#logo{
position:absolute; left:0px; top:10px;
}
ul.menu_list li{
float:left; width:160px; position:relative; text-align:center;
}
ul.menu_list{
position:absolute; left:160px ; top:30px;
}
span.best_btn{
position:absolute; left:830px; top:25px;
}
ul.subMenu{
position:absolute; left:0px; top:50px;
}
div#sub_bg{
width:100%; height:230px; background:#000;
}
</style>
<script src="../libs/jquery-1.7.1.min.js"></script>
<script src="../libs/jquery.easing.1.3.js"></script>
<script>
var $mainMenu;
var $subMenu;
$(document).ready(function(){
// 잠깐 팁
// menu_list 안의 바로 밑에 있는 자식객체로 설정 (>) 하지않으면 그안에 있는 li 전부포함하게됨
// $(".menu_list li")는 클래스명이 menu_list 인 모든 li태그를 선택하는 선택자
// $(".menu_list > li")는 클래스명이 menu_list 인 바로 아래 자식 li태그를 선택하는 선택자
$mainMenu = $(".menu_list>li");
$subMenu = $(".subMenu");
$subMenu.hide(); // 초반에는 숨겨주기
$mainMenu.bind("mouseover", onOver);
$subMenu.bind("mouseout", onOut);
});
function onOver(){
$subMenu.hide();
$(this).children(".subMenu").show();
}
function onOut(){
$(this).children().hide();
}
</script>
</head>
<body>
<div id="top_bg">
<div id="top">
<ul class="top_list">
<li><img src="images/top_menu.gif" alt=""></li>
</ul>
</div>
</div>
<div id="menu_bg">
<div id="menu">
<span id="logo">
<img src="images/gnb_logo.gif" alt="">
</span>
<ul class="menu_list">
<li><a href="#"><img src="images/gnb_menu1_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="images/sub1.png" alt=""></a></li>
</ul>
</li>
<li><a href="#"><img src="images/gnb_menu3_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="images/sub3.png" alt=""></a></li>
</ul>
</li>
<li><a href="#"><img src="images/gnb_menu4_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="images/sub4.png" alt=""></a></li>
</ul>
</li>
<li class="last" ><a href="#"><img src="images/gnb_menu1_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="images/sub5.png" alt=""></a></li>
</ul>
</li>
</ul>
<span class="best_btn">
<a href="#"><img src="images/gnb_menu6.gif" alt=""></a>
</span>
</div>
</div>
</body>
</html>
애니메이션 효과(animation) 3: slideUp, slideDown
실제 메뉴바가 위에서 부터 천천히 보여지는 슬라이드 기능을 가진 show, hide
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>slideUp()_Down()</title>
<style>
#imgWrap
{
border:1px #000000 solid;
width:220px;
height:220px;
text-align:center;
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script>
var $imgWrap;
$(document).ready(function(){
$imgWrap = $("#imgWrap");
$("#btn_hide").bind("click", onSlideDown);
$("#btn_show").bind("click", onSlideUp);
$("#btn_slideToggle").bind("click", onSlideToggle);
});
function onSlideDown(){
$imgWrap.slideDown(3000, "easeOutCubic", function(){
//alert('slideShow');
})
}
function onSlideUp(){
$imgWrap.slideUp(3000, "easeOutCubic", function(){
//alert('slideShow');
})
}
function onSlideToggle(){
$imgWrap.slideToggle(3000, "easeOutCubic", function(){
//alert('slideShow');
})
}
</script>
</head>
<body>
<div id="imgWrap">
<img id="img_1" src="images/img1.jpg">
</div>
<div>
<button id="btn_hide">slideUp</button>
<button id="btn_show">slideDown</button>
<button id="btn_slideToggle">slideToggle</button>
</div>
</body>
</html>
애니메이션 효과(animation) 4: 애니메이션 중복 막기1 "선택자:not(:animated)"
크게 2가지 방식이 있음
첫번째 방식(사용자가 천천히 확인하는 것: 메뉴바)
"선택자:not(:animated)" 를 통해서, 이벤트 안걸려 있는 것만 애니메이션 걸기
두번째 방식(사용자가 빨리 확인하는 것: 그림클릭)
stop() 메소드 사용: 현재 애니메이션 작동중인 것 중지
에니메이션을 안하고 있는 태그만 애니메이션 기능 넣기
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>slide_Menu</title>
<style>
body,p,img,ul,li{
margin:0px; padding:0px; list-style:none; border:none;
}
div#top_bg{
width:100%; height:30px; background:#2c2c2c;
}
div#top{
width:980px; height:30px; margin:0px auto; background:#2c2c2c;
}
ul.top_list{
float:right; margin-top:3px;
}
div#menu_bg{
width:100%; height:80px; background:#edeef0;
}
div#menu{
width:980px; height:80px; margin:0px auto; background:#edeef0; position:relative; left:0px; top:0px;
}
span#logo{
position:absolute; left:0px; top:10px;
}
ul.menu_list li{
float:left; width:160px; position:relative; text-align:center;
}
ul.menu_list{
position:absolute; left:160px ; top:30px;
}
span.best_btn{
position:absolute; left:830px; top:25px;
}
ul.subMenu{
position:absolute; left:0px; top:50px;
}
div#sub_bg{
width:100%; height:230px; background:#000;
}
</style>
<script src="../libs/jquery-1.7.1.min.js"></script>
<script src="../libs/jquery.easing.1.3.js"></script>
<script>
var $mainMenu;
var $subMenu;
var $subBg;
$(document).ready(function(){
// tip
// ul, li가 상위 관계의 태그들에 많이 쓰는 이유: ul 아래의 자식객체로는 li밖에 안들어옮. 그러므로 상위 관계 작업할때, ul, li를 많이 씀.
$maniMenu = $(".menu_list").children();
$subMenu = $(".subMenu");
$subBg = $("#sub_bg");
$subMenu.hide();
$subBg.hide();
$maniMenu.bind("mouseover", onOver);
$subBg.bind("mouseout", onOut);
});
function onOver(){
/*
$subBg.slideDown(500, "easeOutExpo", function(){
$subMenu.show();
});
*/
$("#sub_bg:not(:animated)").slideDown(500, "easeOutExpo", function(){
$subMenu.show();
});
}
function onOut(){
$subMenu.hide();
$("#sub_bg:not(:animated)").slideUp(500, "easeOutExpo", function(){
});
}
</script>
</head>
<body>
<div id="top_bg">
<div id="top">
<ul class="top_list">
<li><img src="../01_show()_hide()/images/top_menu.gif" alt=""></li>
</ul>
</div>
</div>
<div id="menu_bg">
<div id="menu">
<span id="logo">
<img src="../01_show()_hide()/images/gnb_logo.gif" alt="">
</span>
<ul class="menu_list">
<li><a href="#"><img src="../01_show()_hide()/images/gnb_menu1_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="../01_show()_hide()/images/sub1.png" alt=""></a></li>
</ul>
</li>
<li><a href="#"><img src="../01_show()_hide()/images/gnb_menu3_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="../01_show()_hide()/images/sub3.png" alt=""></a></li>
</ul>
</li>
<li><a href="#"><img src="../01_show()_hide()/images/gnb_menu4_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="../01_show()_hide()/images/sub4.png" alt=""></a></li>
</ul>
</li>
<li class="last" ><a href="#"><img src="../01_show()_hide()/images/gnb_menu1_off.gif" alt=""></a>
<ul class="subMenu">
<li><a href="#"><img src="../01_show()_hide()/images/sub5.png" alt=""></a></li>
</ul>
</li>
</ul>
<span class="best_btn">
<a href="#"><img src="../01_show()_hide()/images/gnb_menu6.gif" alt=""></a>
</span>
</div>
</div>
<div id="sub_bg">
</div>
</body>
</html>
애니메이션 효과(animation) 5: fadeIn, fadeOut, fadeToggle, fadeTo
* Tip: fadeTo
fadeTo
$imgWrap.fadeOut(3000, 0.2, "easeOutExpo");
내가 원하는 투명도를 지정할 수 있음
또한 opacity 0으로 하면, 태그가 hidden이 되는게 아니라, opacity 0으로 되게됨.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fadeIn()_Out()</title>
<style>
#imgWrap{
border:1px #000000 solid;
width:220px;
height:220px;
text-align:center;
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script>
var $imgWrap;
$(document).ready(function(){
$imgWrap = $("#imgWrap");
$("#btn_show").bind("click", onFadeIn);
$("#btn_hide").bind("click", onFadeOut);
$("#btn_fadeToggle").bind("click", onFadeToggle);
});
function onFadeIn(){
// 내가 원하는 투명도를 지정할 수 있음
$imgWrap.fadeIn(3000, "easeOutExpo", function(){
//alert("1");
});
}
function onFadeOut(){
/*
$imgWrap.fadeOut(3000, 0.2, "easeOutExpo", function(){
//alert("2");
});*/
$imgWrap.fadeTo(3000, 0.2, "easeOutExpo");
// fadeTo
// $imgWrap.fadeOut(3000, 0.2, "easeOutExpo");
// 내가 원하는 투명도를 지정할 수 있음
// 또한 opacity 0으로 하면, 태그가 hidden이 되는게 아니라, opacity 0으로 되게됨.
}
function onFadeToggle(){
// 내가 원하는 투명도를 지정할 수 있음
$imgWrap.fadeToggle(3000, "easeOutExpo", function(){
//alert("3");
});
}
</script>
</head>
<body>
<div id="imgWrap">
<img id="img_1" src="images/img1.jpg">
</div>
<div>
<button id="btn_show">fadeIn</button>
<button id="btn_hide">fadeOut</button>
<button id="btn_fadeToggle">fadeToggle</button>
</div>
</body>
</html>
애니메이션 효과(animation) 6: 애니메이션 중복 막기2 stop()
크게 2가지 방식이 있음
첫번째 방식(사용자가 천천히 확인하는 것: 메뉴바)
"선택자:not(:animated)" 를 통해서, 이벤트 안걸려 있는 것만 애니메이션 걸기
두번째 방식(사용자가 빨리 확인하는 것: 그림클릭)
stop() 메소드 사용: 현재 애니메이션 작동중인 것 중지
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fadeMenu</title>
<style>
body,p,img,ul,li{
margin:0px; padding:0px; border:none; list-style:none;
}
body{
margin:200px; background:#000;
}
div#imgWrap{
width:1000px; height:200px; float:left;
}
ul.img_list li{
width:200px; float:left; margin-right:30px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script>
var $sumImg;
$(document).ready(function(){
$sumImg = $(".img_list").children("li");
$sumImg.css("opacity", 0.2);
$sumImg.bind("mouseover", onOver);
$sumImg.bind("mouseout", onOut);
});
function onOver(){
// stop: 하던 애니메이션이 있으면 하고, 진행해라
$(this).stop();
$(this).fadeTo(200, 1, "easeOutExpo");
}
function onOut(){
$(this).stop();
$(this).fadeTo(200, 0.2, "easeOutExpo");
}
</script>
</head>
<body>
<div id="imgWrap">
<ul class="img_list">
<li> <a href="#"><img src="images/img3.jpg" alt="" /></a></li>
<li> <a href="#"><img src="images/img4.jpg" alt="" /></a></li>
<li> <a href="#"><img src="images/img5.jpg" alt="" /></a></li>
<li> <a href="#"><img src="images/img6.jpg" alt="" /></a></li>
</ul>
</div>
</body>
</html>