fadeIn - fadeOut

 

* fadeIn - fadeOut

주어진 시간동안 서서히 사라지거나 나타난다.

$(selector).fadeIn(speed,callback);      // 서서히 나타남
$(selector).fadeOut(speed,callback);     // 서서히 사라짐
$(selector).fadeToggle(speed,callback);  // 사라지거나 나타나거나

 

speed : hide-show와 동일하게 'fast' or 'slow' 를 주거나 ms 값을 넣는다.

callback : 실행 후 호출할 함수

$(document).ready(function(){
  $("#button_fadein").click(function(){
    $("h2").fadeIn(3000, function(){alert("The paragraph is now hidden")});
  });
});

$(document).ready(function(){
  $("#button_fadeout").click(function(){
    $("h2").fadeOut(3000);
  });
});

 

 

* fadeTo

주어진 값 만큼 불투명으로 효과를 준다.

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

 

speed : 흐려지는데 걸리는 시간

opacity : 불투명도 (0~1 사이값)

callback : 실행 후 호출 함수

$(document).ready(function(){
  $(".buttonfadeto").click(function(){
    $("#fade1").fadeTo('slow',0.1);
  });
});

$(document).ready(function(){
  $(".buttonfadeto").click(function(){
    $("#fade2").fadeTo('slow',0.5);
  });
});

$(document).ready(function(){
  $(".buttonfadeto").click(function(){
    $("#fade3").fadeTo('slow',0.9);
  });
});