[JQUERY] easing - 효과의 진행 속도 2012-07-20

[JQUERY]

easing - 효과의 진행 속도

2012-07-20

fadeIn()이나 slideToggle()과 같은 함수의 api를 보면, 함수의 인자중에 easing 이라는 부분이 있다.
이것은 해당 효과의 진행 속도를 어떻게 해줄것이냐를 지정해주는것으로, jquery에는 기본적으로 linear와 swing을 지원하고 있다.

그외의 지정 효과들을 사용하고 싶다면, 아래 링크의 소스중 하나를 포함시켜야 한다.
easing : http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js - 사용 중지됨
http://james.padolsey.com/demos/jquery/easing/easing.js

해당 소스를 가지고 이전에 작성했던 fadeToggle()에 적용 시켜 보았다.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://james.padolsey.com/demos/jquery/easing/easing.js"></script>
<script type="text/javascript">
function auto_slide2(){
  $('#ts1').fadeToggle(5000, "easeInOutBounce");
  setTimeout('auto_slide2()',5000);
}

$(function(){
  auto_slide2();
});
</script>
</head>

<body>
<div style="position:absolute;top:0px;"><img src="img005.jpg"></div>
<div id="ts1" style="position:absolute;top:0px;"><img src="img006.jpg"></div>
</body>
</html>

소스에 보면 여러 효과들이 있으니, 응용은 알아서 해보기 바란다.