[jQuery] jQuery API (4/7) - 효과

[jQuery] jQuery API (4/7) - 효과

4. 효과

.animate() : 해당 객체의 CSS 변화 효과를 준다.  /$('p').animate({CSS Map}, {options});

        / $('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', 

             complete : function(){....}});  {queue:false}

.delay() : 해당 시간만큼 실행을 delay 시킨다.

            / $("div").slideDown().delay(5000).slideUp();  // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다.

.stop() : 실행중인 애니메이션을 중지한다.         $("div").stop();                      // div의 큐의 애니메이션을 멈춘다.

.show() : 해당 요소를 보여준다.

        $("div").show();            // div 가 나타난다.

        $("div").show(1000);            // div 가 1초에 걸쳐서 나타난다.

.hide() : 해당 요소를 숨긴다.

        $("div").hide();                      // div가 사라진다.

        $("div").show(1000);            // div 가 1초에 걸쳐서 사라진다.

.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행

        $("div").toggle();                      // div가 hide 상태면 show() / show 상태면 hide()한다.

$("div").toggle(1000);            // div 가 1초에 걸쳐서 toggle() 한다.

.fadeIn() : 서서히 나타나게 한다.

        $("div").fadeIn();                      // div가 서서히 나타난다.

        $("div").fadeIn("slow");                      // div가 천천히 서서히 나타난다.

        $("div").fadeIn(3000");                      // div가 3초에 걸쳐서 서서히 나타난다.

.fadeOut() : 서서히 사라지게 한다.

.fadeToggle() : show 상태면 fadeOut(), hide 상태면 fadeIn()이 실행된다.

.fadeTo() : 주어진 시간동안 주어진 투명도로 변화한다.

        $("div").fadeTo("slow", 0.15);                      // 천천히 투명도 0.15 로 변화

        $("div").fadeTo("slow", 0.15);                      // 천천히 투명도 0.15 로 변화

.slideDown() : 선택 요소가 슬라이드 되어 내려온다.

        $("div").slideDown();                      // div가 아래로 내려온다.

        $("div").slideDown("slow");                      // div가 천천히 아래로 내려온다..

        $("div").slideDown(3000");                      // div가 3초에 걸쳐서 아래로 내려온다.

.slideUp() : 선택 요소가 슬라이드 되어 올라간다.

.slideToggle() : 선택 요소가 slideDown 상태면 slideUp(), slideUp 상태면 slideDown()을 실행

.queue() : 애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 한다.(ex: class 속성 변경)

.dequeue() : queue에 쌓여있는 나머지 함수를 실행한다.

       $("div").show("slow").animate({left:'+=200'}. 2000)    // id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동한다

       $("div").queue(function(){                                      // queue의 함수를 호출한다.

               $(this).addClass("newcolor");                            // id div 요소의 class를 newcolor 등록

                $(this).dequeue();                                            // 다음 애니메이션 실행

       });

        $("div").animate({left:'-=200'}, 500);                        // 05초간 왼쪽으로 200 이동한다.

.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.   

$("#stop").click(function(){                   // id stop 요소를 클릭하면                    $("div").clearQueue();                      // div의 queue가 비워진다. 실행중인 큐는 진행한다.            });

출처: https://hyeonstorage.tistory.com/63?category=549771 [개발이 하고 싶어요]