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