jQuery - Effect 1

* hide(), show(), toggle() 함수
** size 와 opacity 변함

 $(selector).hide(speed,callback);
 $(selector).show(speed,callback);
 $(selector).toggle(speed,callback);

- speed 는 millisecond 나 혹은 "slow", "fast"

$(document).ready(function(){
 // #hide1 버튼이 click 되면 #p1 을 hide() 
 // #show1 버튼이 click 되면 #p1 을 show()
    $("#hide1").click(function(){
        $("#p1").hide();
    });
    $("#show1").click(function(){
        $("#p1").show();
    });

$("#hide2").click(function(){
    $("#p21").hide("slow");
    $("#p22").hide("fast");
    $("#p23").hide(2000);
 });
    
* #show2 버튼을 click 하면 위의 3개가 show(), show()의 매개변수 주기
$("#show2").click(function(){
    $("#p21").show("slow");
    $("#p22").show("fast");
    $("#p23").show(2000);

 });
    
* #toggle2 버튼을 click 하면 위의 3개가 toggle(),  toggle() 의 매개변수 주기
$("#toggle2").click(function(){
    $("#p21").toggle("slow");
    $("#p22").toggle("fast");
    $("#p23").toggle(10000);
//alert("언제 뜰까요?")
});

---

* fadeIn() fadeOut() fadeToggle() fadeTo() 함수
** opacity 가 변함.

  $(selector).fadeIn(speed,callback);    
  $(selector).fadeOut(speed,callback);
  $(selector).fadeToggle(speed,callback);
  $(selector).fadeTo(speed,opacity,callback);

    $("#fadeOut1").click(function(){
        $("#p3").fadeOut();
    });

    $("#fadeIn1").click(function(){
        $("#p3").fadeIn();
    });

* #fadeOut2 버튼을 click() 하면 위 3개 #p41, #p42, #p43 을 fadeOut() 매개변수 주기
    $("#fadeOut2").click(function(){
        $("#p41").fadeOut("slow");
        $("#p42").fadeOut("fast");
        $("#p43").fadeOut(2000);
    });

    $("#fadeIn2").click(function(){
        $("#p41").fadeIn("slow");
        $("#p42").fadeIn("fast");
        $("#p43").fadeIn(2000);
    });
    
* #fadeToggle2 버튼을 click() 하면 위 3개 #p41, #p42, #p43 을 fadeToggle() 매개변수 주기
    $("#fadeToggle2").click(function(){
        $("#p41").fadeToggle("slow");
        $("#p42").fadeToggle("fast");
        $("#p43").fadeToggle(2000);
    });

  // 투명도값: 0 ~ 1.0
    $("#fadeTo3").click(function(){
     $("#p51").fadeTo("slow", 0.15);
$("#p52").fadeTo("slow", 0.4);
        $("#p53").fadeTo("slow", 0.7);
    });

---

* slideDown() slideUp() slideToggle()

 $(selector).slideDown(speed,callback);
 $(selector).slideUp(speed,callback);
 $(selector).slideToggle(speed,callback);

$("#slideUp").click(function(){
    $("#p61").slideUp();
    $("#p62").slideUp("slow");
    $("#p63").slideUp("fast");
    $("#p64").slideUp(2000);
});

* #slideDown을 click() 하면 위 네개를 slideDown() 시키기
// 매개변수 주기
$("#slideDown").click(function(){
    $("#p61").slideDown();
    $("#p62").slideDown("slow");
    $("#p63").slideDown("fast");
    $("#p64").slideDown(2000);
});

* #slideToggle을 click() 하면 위 네개를 slideToggle() 시키기
// 매개변수 주기
$("#slideToggle").click(function(){
    $("#p61").slideToggle();
    $("#p62").slideToggle("slow");
    $("#p63").slideToggle("fast");
    $("#p64").slideToggle(2000, tada);  // 애니메이션이 끝나고 호출되는 함수 (callback 함수)
// alert("짜라~~");
});
 
});

function tada(){
alert("짜잔");
}