jquery 정리 - effect(w3school)

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

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

Shown elements are hidden and hidden elements are shown:

$("button").click(function(){

    $("p").toggle();

});

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

fadeIn() 

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

    $("#div1").fadeIn();

    $("#div2").fadeIn("slow");

    $("#div3").fadeIn(3000);

fadeOut() 

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

fadeToggle()

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

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

fadeTo()

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

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

    $("#div1").fadeTo("slow", 0.15);

    $("#div2").fadeTo("slow", 0.4);

    $("#div3").fadeTo("slow", 0.7);

slideDown()

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

slideUp()

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

slideToggle()

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

animate()

$("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'
    });
}); 

This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

stop()

$(selector).stop(stopAll,goToEnd);