jQuery UI 라이브러리 설치 및 테스트
jQuery UI 라이브러리를 사용하면 기본적으로 지원이되지 않는 컬러 애니메이션이나 easing 효과를 적용할 수 있다.
easing 효과의 종류 및 데모 확인: http://jqueryui.com/easing/
jQuery UI 라이브러리 다운로드
http://jquery.com에 접속하여, Plugins > UI > jQuery UI Core > 최근 버전 선택 > Download Now > Quick download:stable 링크 클릭
압축을 해제하고 jquery-us.js 파일을 프로젝트에 포함시킨다
jquery-2.1.1.js
jquery-ui-1.11.0.zip다음과 같은 코드를 사용하여 테스트해본다
아래의 코드에 주석으로 처리된 부분에 있는 'linear', 'swing'은 jQuery 가 기본으로 제공하는 easing 효과이며, easeOutBounce는 jquery-ui 라이브러리가 제공하는 easing 효과의 이름이다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery UI Test</title>
<style type="text/css">
body { text-align: center;}
</style>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btTest').click(function(){
$('#div1').stop().animate(
/*{'margin-top':'+=100'},3000,'linear');*/
/*{'margin-top':'+=100'},3000,'swing');*/
{'margin-top':'+=100'},3000,'easeOutBounce');
});
});
</script>
</head>
<body>
<div id="div1">
<img src="sample.jpg">
</div>
<button id="btTest" >TEST</button>
</body>
</html>
jquery-ui 라이브러리를 이용하여 컬러 애니메이션 중의 easing 효과를 적용한 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery UI Test</title>
<style type="text/css">
body { text-align: center;}
</style>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btTest').click(function(){
$('#div1').stop().animate(
{'background-color':'green'},3000,'easeOutBounce');
});
});
</script>
</head>
<body>
<div id="div1">
<img src="sample.jpg">
</div>
<button id="btTest" >TEST</button>
</body>
</html>
jquery-ui.js 를 이용하여 갤러리 효과를 구현한 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery UI Test</title>
<style type="text/css">
body { text-align: center;}
#mask {
width:1000px; height:1000px;
position:absolute; top:0; left:300px;
z-index: 1; opacity:1.0; background-color: white;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
var imgObj = new Array();
var idx = 0;
$(document).ready(function() {
$('#btTest1').click(function(){
$('#div1').stop().animate({'width':0},500,'easeOutBack',function(){
var img = imgObj[idx++];
if(idx==imgObj.length-1) idx = 0;
var imgW = img.width;
$('#div1').css('position','absolute');
$('#div1').css('left', $('#mask').css('left'));
$('#currImg').attr('src',img.src);
$('#div1')
.animate({'left':'0'},1000,'easeOutBack',function(){
$('#div1').css('width',imgW);
});
});
});
});
$(window).load(function(){
imgObj[0] = new Image();
imgObj[0].src = 'images/m0.jpg';
imgObj[idx++].onload = function() {
//console.log(i+'.로드됨');
var imgW = this.width;
$('#currImg').attr('src',imgObj[0].src);
$('#div1').animate({'width':imgW},1000,'easeOutBack',function(){
$('#div1').css('width',imgW);
});
}
for(var i=1;i<10;i++) {
imgObj[i] = new Image();
imgObj[i].src = $('#i'+i).attr('src');
imgObj[i].onload = function() {
//console.log(i+'.로드됨');
}
}
});
</script>
</head>
<body>
<div id="div1" style='width:0; margin-left:10px; z-index: -1'>
<img id='currImg' src="#">
</div>
<div id="mask"></div>
<p>
<button id="btTest1" style="position:absolute;top:220px;left:100px;">NEXT >></button>
<div style="visibility:hidden;">
<img id="i0" src="images/m0.jpg">
<img id="i1" src="images/m1.jpg">
<img id="i2" src="images/m2.jpg">
<img id="i3" src="images/m3.jpg">
<img id="i4" src="images/m4.jpg">
<img id="i5" src="images/m5.jpg">
<img id="i6" src="images/m6.jpg">
<img id="i7" src="images/m7.jpg">
<img id="i8" src="images/m8.jpg">
<img id="i9" src="images/m9.jpg">
</div>
</body>
</html>