jQuery: basic effect 제이쿼리 기본효과, sliding, fade

기본효과

 

1. show()

display:block 의 효과

 

2. hide()

display:none의 효과

 

3. toggle()

show()와 hide()의 반복

 

() 들어가는 값은 시간을 milisecond 단위로 적거나, fast, slow를 사용할 수 있다.

 

        $(".hide").click(function(){
            $("div").hide(1000);
        })
        
        $(".show").click(function(){
            $("div").show("fast"); 
        })
        
        $(".toggle").click(function(){
            $("div").toggle(1000);
        })

 

 

slide 효과

 

1. slideUp() 

- $("선택자").slideUp(시간,콜백함수());

 

2. slideDown() 

- $("선택자").slideDown(시간,콜백함수());

 

3. slideToggle() : slideUp/slideDown

 

    $(function(){
        $(".up").click(function(){
            $(".box").slideUp(1000);
        })
        
        $(".down").click(function(){
            $(".box").slideDown(1000);
        })
        
        $(".toggle").click(function(){
            $(".box").slideToggle("slow");
        })
    })

 

Fade 효과

 

1. fadeIn() 

- $("선택자").fadeIn(시간,콜백함수())

 

2. fadeOut() 

- $("선택자").fadeOut(시간,콜백함수())

 

3. fadeToggle() : fadeIn/fadeOut

- $("선택자").fadeToggle(시간,easing,콜백함수());

 

4. fadeTo(): opacity 만큼 투명해진다.

- $("선택자").fadeTo(시간,투명도,콜백함수());

 

       $(function(){
            $("button:eq(1)").click(function(){
                $(".box1").fadeOut(1000);
                $(".box2").fadeOut("fast");
                $(".box3").fadeOut("slow");
            })
            
            $("button:eq(0)").click(function(){
                $(".box1").fadeIn(1000);
                $(".box2").fadeIn("fast");
                $(".box3").fadeIn("slow");
            })
            
            $("button:eq(2)").click(function(){
                $(".box1").fadeToggle(1000);
                $(".box2").fadeToggle("fast");
                $(".box3").fadeToggle("slow");
            })
            
            $("button:eq(3)").click(function(){
                $(".box4").fadeTo(1000,0.5);
            })
        })