JQueryボタンバインドイベント

  --    
  --    
  --    
    --    
    --    
    /  --    
    --    
    --    
    /  --    
       --    
     [  ]



$(function(){
    //         ，        ：  API  
    //API：application program interface            
  
    $("#btn1").click(function(){
        $("#box").show(2000);//show("fast"/"slow"/1000)
    });

    $("#btn2").click(function(){
        $("#box").hide(2000);//show("fast"/"slow"/1000)
    });

    $("#btn3").click(function(){
        $("#box").toggle(2000);//show("fast"/"slow"/1000)
    });

    $("#btn4").click(function(){
        $("#box").slideDown(2000);//show("fast"/"slow"/1000)
    });

    $("#btn5").click(function(){
        $("#box").slideUp(2000);//show("fast"/"slow"/1000)
    });

    $("#btn6").click(function(){
        $("#box").slideToggle(2000);//show("fast"/"slow"/1000)
    });

    $("#btn7").click(function(){
        $("#box").fadeIn(2000);//show("fast"/"slow"/1000)
    });

    $("#btn8").click(function(){
        $("#box").fadeOut(2000);//show("fast"/"slow"/1000)
    });

    $("#btn9").click(function(){
        $("#box").fadeToggle(2000);//show("fast"/"slow"/1000)
    });

    $("#btn10").click(function(){
        $("box").fadeTo(2000,0.5);//show("fast"/"slow"/1000)
    });

    $("#btn11").click(function(){
        $("#box").animate({
            "margin-left":"500px",
            "margin-top":"50px",
            "width":"1000px",
            "height":"100px"
        },2000).animate({
             "margin-left": "0px",
            "margin-top": "10px",
            "width": "100px",
            "height": "200px"
        },1000).animate({
            "margin-left": "60px",
            "margin-top": "110px",
            "width": "10px",
            "height": "20px"
        },1000).animate({
            "margin-left": "0px",
            "margin-top": "0px",
            "width": "400px",
            "height": "200px"
        },1000);
    });
});