## 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"); } } ~~~