[jQuery]페이드

요소를 시야에 나타내거나 없어지게 하는 것을 페이딩이라고 합니다.

 

 

fadeIn()메서드

 

숨겨진 요소를 시야에 나타내는데 사용됩니다.

 

$(selector).fadeIn(speed,callback);

 

speed 매개변수는 페이드 효과의 지속시간을 결정합니다. 밀리초값을 사용합니다.

 

callback 매개변수는 페이딩이 완료된 후에 실행될 함수를 결정합니다.

 

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

직접해보기

 

 

 

 

 

 

fadeout() 메서드

 

요소를 시야에서 없애주는데 사용됩니다.

 

$(selector).fadeOut(speed,callback);

 

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

 

 

 

fadeToggle() 메서드

 

fadeIn() 및 fadeOut() 메서드를 반복합니다.

 

$(selector).fadeToggle(speed,callback);

 

 

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

직접해보기

 

 

 

 

 

 

fadeTo() 메서드

 

fadeTo()메서드는 지정된 불투명도로 페이딩해줍니다.

 

$(selector).fadeTo(speed,opacity,callback);

 

opacity 매개변수에 불투명도를 지정해줍니다.(0과 1사이의 값)

 

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