메뉴 건너뛰기

조회 수 205 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

adeIn()이나 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>
 

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


  1. No Image 31Mar
    by
    2021/03/31 Views 254 

    행에 징검다리 스타일 입히기 (:odd, :even)

  2. No Image 31Mar
    by
    2021/03/31 Views 287 

    제이쿼리에서 클래스(class) 이름 추가/삭제

  3. No Image 31Mar
    by
    2021/03/31 Views 864 

    click event scroll

  4. No Image 31Mar
    by
    2021/03/31 Views 341 

    click에 따른 마우스 휠 on off

  5. No Image 31Mar
    by
    2021/03/31 Views 348 

    다중 select

  6. No Image 31Mar
    by
    2021/03/31 Views 313 

    draggable - div 드래그

  7. No Image 31Mar
    by
    2021/03/31 Views 393 

    parent of the iframe element selector

  8. No Image 31Mar
    by
    2021/03/31 Views 269 

    prepend / append - element 추가 (부모/자식 관계)

  9. No Image 31Mar
    by
    2021/03/31 Views 214 

    before / after / insertBefore / insertAfter - element 추가 (동등 관계)

  10. No Image 31Mar
    by
    2021/03/31 Views 301 

    마우스 좌표 얻기

  11. No Image 26Mar
    by
    2021/03/26 Views 636 

    간단한 마우스 포인터 따라 다니기

  12. No Image 26Mar
    by
    2021/03/26 Views 299 

    change 전의 값을 가져오기

  13. No Image 26Mar
    by
    2021/03/26 Views 216 

    focus() 로 오브젝트 옮기기

  14. No Image 26Mar
    by
    2021/03/26 Views 873 

    새창(자식창) 제어하기, 새창 POST방식으로 값 넘기기

  15. No Image 26Mar
    by
    2021/03/26 Views 603 

    SELECTBOX MULTIPLE 검색하기

  16. 26Mar
    by 조쉬
    2021/03/26 Views 205 

    easing - 효과의 진행 속도

  17. No Image 26Mar
    by
    2021/03/26 Views 321 

    fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환

  18. No Image 26Mar
    by
    2021/03/26 Views 878 

    정규식, 한글 못쓰게 하기, replace all

  19. No Image 26Mar
    by
    2021/03/26 Views 215 

    input checkbox 모두 체크하기

  20. No Image 26Mar
    by
    2021/03/26 Views 1173 

    attr() - style의 특정 속성만 바꾸기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved