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

2519 ワード





Title
















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