## jQuery效果 * show(),hide()和toggle() ~~~JavaScript //hide():用于隱藏HTML元素，show()用于顯示HTML元素 //toggle():隱藏與顯示的切換，如果當前元素顯示，則隱藏。否則顯示該元素 function showAndHide(dom) { /*var flag = $(dom).attr("data-flag"); if(flag == 0) { $("#second").hide(1000); $(dom).attr("data-flag","1"); } else { $("#second").show(1000) $(dom).attr("data-flag","0"); }*/ $("#second").toggle(1000); } ~~~ * fadeIn()和fadeOut() ~~~JavaScript function toggleOfDiv() { var flag = $("#mianDiv").attr("data-flag"); if(flag == 0) { $("#mianDiv").fadeOut(3000); $("#mianDiv").attr("data-flag","1"); } else { $("#mianDiv").fadeIn(3000); $("#mianDiv").attr("data-flag","0"); } } ~~~ * slideUp()和slideDown() ~~~JavaScript function toggleOfDiv() { var flag = $("#mianDiv").attr("data-flag"); if(flag == 0) { $("#mianDiv").slideUp(3000); $("#mianDiv").attr("data-flag","1"); } else { $("#mianDiv").slideDown(3000); $("#mianDiv").attr("data-flag","0"); } } ~~~ * animate()方法 語法：`(selector).animate({styles},speed,easing,callback)` ~~~JavaScript function toggleOfDiv() { var flag = $("#mianDiv").attr("data-flag"); if(flag == 0) { $("#mianDiv").animate({height:"+=100px"},2000); $("#mianDiv").attr("data-flag","1"); } else { $("#mianDiv").animate({height:"-=100px"},2000); $("#mianDiv").attr("data-flag","0"); } } ~~~