jQuery - Effects

jQuery Effects

https://learn.jquery.com/effects/

http://www.w3schools.com/jquery/jquery_ref_effects.asp

1. .hide() & .show() & .toggle()
-속도는 milliseconds, slow, fast
 
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
 
e.g. 
$("button").click(function(){
    $("p").hide(1000);
});

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide("slow");
    });
});


2. .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()
-속도는 milliseconds, slow, fast
 
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
  
.fadeIn() - 나타나라
.fadeOut() - 없어져라
.fadeToggle() - 껏다켰다
.fadeTo() - 불투명도 조절


3..animate()
주의사항: 
- CSS에 position 주기
- 속성이름은 꼭 낙타작성법(?) 으로 해야함 (e.g. paddingLeft)
- 색깔 바꾸고 싶으면 Color Animations plugin 다운로드 받아야함 

$(selector).animate({params},speed,callback);

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


<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>



4. Callback 
2개의 동작을 작성했을때, 동시에 작동 됨을 막아줌

$(selector).hide(speed,callback);
 
e.g.
$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});