jQuery Effect

Table of contents

1. Effects Methods
   1. What are Effects?
2. Hide and Show
   1. hide(), show()
   2. toggle()
3. Fading
   1. FadeIn()
   2. fadeOut()
   3. fadeToggle()
   4. fadeTo()
4. Sliding
   1. slideDown()
   2. slideUp()
   3. slideToggle()
5. Animation
   1. animate()
   2. Animation Features
6. Effect Control
   1. stop()
   2. delay()
   3. finish()

Effects Methods

What are Effects?

효과를 내는 메소드들을 말함,

Hide, Show, Toggle, Slide, Fade, Animate가 있음

Hide and Show

hide(), show()

▸ 보이고(show) 숨길때(hide) 사용

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

toggle()

▸ 토글버튼 생성시 사용

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("p").toggle();
});

Fading

fade an element in and out of visibility

FadeIn()

▸ 보이지 않는 요소를 보이게 할때 사용

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()

▸ 보이는 요소를 보이지 않게 할때 사용

▸ 원래 자리까지 없애버림

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle()

▸ fadeIn()과 fadeOut() 합친 버튼

▸ 원래 자리까지 없애버림

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo()

▸ fading to a given opacity

▸ value between 0 and 1

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ opacity(required) : fading to a given opacity (value between 0 and 1)

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

Sliding

slideDown()

▸ slide down an element

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp()

▸ slide up an element

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle()

▸ toggles between the slideDown() and slideUp()

syntax

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("#flip").click(function(){
  $("#panel").slideToggle();
});

Animation

animate()

▸ create custom animations

▸ 거의 모든 CSS요소를 수정가능하지만, 카멜 표기법으로 사용해야함. (ex padding-left → paddingLeft )

▸ 색상을 바꾸는건 플러그인이 다름. jQuery.com

syntax

▸ params(required) : CSS properties to be animated.

▸ speed(optional) : slow, fast, miliseconds

▸ callback(optional) : a function to be executed after method

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 

or

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 

!Note

Animation Features

• ,로 애니메이션 중복가능

    $("button").click(function(){
      $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      });
    }); 
  

• 상대값 사용가능

    $("button").click(function(){
      $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
      });
    }); 
  

• 예약어 사용가능

    $("button").click(function(){   
      $("div").animate({
        height: 'toggle'        //show, hide, toggle
      });
    }); 
  

• 큐기능 사용 가능

  순차적으로 애니메이션을 실행시키고 싶을때

    $("button").click(function(){
      var div = $("div");
      div.animate({left: '100px'}, "slow");
      div.animate({fontSize: '3em'}, "slow");
    }); 
  

• 시간당 속도 함수 사용가능

  시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있음

  • swing : 시작 / 끝에서는 느리게 움직이지만 중간에서는 빨라짐

  • linear : 일정한 속도로 움직임

    $("#btnStart").on("click", function(){
      $(".bar").stop().animate({
        width: "400px"    
      }, 2000, "linear"); // 시간당 속도 함수를 "linear"으로 설정함.
    });
  
    $("#btnEnd").on("click", function(){
      $(".bar").stop().animate({
        width: "1px"      
      }, 2000, "swing");  // 시간당 속도 함수를 "swing"으로 설정
    });
  

Effect Control

stop()

▸ 선택한 요소에서 실행 중인 모든 이펙트 효과를 일시적으로 중지

▸ works for all jQuery effect functions, including sliding, fading and custom animations

syntax

▸ stopAll(optional) : whether also the animation queue should be cleared or not (default = false)

which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards

▸ goToEnd(optional) : function to be executed after method (default = false)

$("#stop").click(function(){
  $("#panel").stop();
});

delay()

▸ 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

finish()

▸ 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});

$("button#finish").on("click", function() {
  $("div").finish();
});

.delay()와 .finish()의 차이점