显示和隐藏
1. show(speed) ：speed 可以取：slow/fast/毫秒
1 ????????$("#show").click(function(){2 ????????????$("p").show(1000);3 ????????});2. hide(speed) ：
1 ????????$("#hide").click(function(){2 ????????????$("p").hide();3 ????????});3. toggle() ：切换 show() 和 hide() 方法
1 ????????$("button").click(function(){2 ????????????$("p").toggle();3 ????????});淡入淡出
1. fadeIn(speed) ：淡入已隐藏的元素
1 ????????$("button").click(function(){2 ????????????$("div").fadeIn();3 ????????});2. fadeOut(speed) ：淡出可见元素
1 ????????$("button").click(function(){2 ????????????$("div").fadeOut();3 ????????});3. fadeToggle(speed) ：在前两个方法之间切换
1 ????????$("button").click(function(){2 ????????????$("div").fadeToggle();3 ????????});4. fadeTo(speed, opacity) ：允许渐变为给定的不透明度（0-1）
1 ????????$("button").click(function(){2 ????????????$("div").fadeTo("slow",.3);3 ????????});滑动
1. slideDown() ：向下滑动元素
1 ????????$("div1").click(function(){2 ????????????$("div2").slideDown();3 ????????});2. slideUp() ：向上滑动元素
1 ????????$("div1").click(function(){2 ????????????$("div2").slideUp();3 ????????});3. slideToggle() ：在前两个方法之间切换
1 ????????$("div1").click(function(){2 ????????????$("div2").slideToggle();3 ????????});动画
animate() ：
1. 操作单个属性
1 ????????$("button").click(function(){2 ????????????$("div").animate({left:‘300px‘});3 ????????});2. 操作多个属性
1 ????????$("button").click(function(){2 ????????????$("div").animate({3 ????????????????left:‘300px‘,4 ????????????????width:‘300px‘,5 ????????????????height:‘300px‘,6 ????????????????opacity:‘.3‘7 ????????????});8 ????????});3. 使用相对值
1 ????????$("button").click(function(){2 ????????????$("div").animate({3 ????????????????left:‘300px‘,4 ????????????????width:‘+=300px‘,5 ????????????????height:‘+=300px‘,6 ????????????????opacity:‘.3‘7 ????????????});8 ????????});4. 使用预定义值：动画的值可以设置为：show/hide/toggle
1 ????????$("button").click(function(){2 ????????????$("div").animate({3 ????????????????height:‘toggle‘4 ????????????}); ???5 ????????});5. 队列功能
1 ????????$("button").click(function(){2 ????????????var div = $("div");3 ????????????div.animate({width:‘300px‘,opacity:‘.3‘,"slow"});4 ????????????div.animate({height:‘300px‘,opacity:‘.6‘,"slow"});5 ????????????div.animate({width:‘100px‘,opacity:‘.3‘,"slow"});6 ????????????div.animate({height:‘100px‘,opacity:‘.8‘,"slow"});7 ????????});停止动画
stop() ：
1 ????????$("#stop").click(function(){2 ????????????$("#panel").stop();3 ????????});callback
效果完全实现以后回调函数，如果没有回调函数，效果会在完成前弹出
1 ????????$("button").click(function(){2 ????????????$("p").hide("slow",function(){3 ????????????????alert("段落隐藏了")；4 ????????????})；5 ????????});jQuery 效果
原文地址：https://www.cnblogs.com/knuzy/p/8934132.html