jQuery学习　二　jQuery 效果

2019-11-02 18:26:29

字体：大中小

来源：转载

供稿：网友

jQuery学习　二　jQuery 效果二　jQuery 效果(1) 隐藏和显示 hide() 和 show() 和toggle()1, hide() 和 show()$("button").click(function(){ $("p").hide(1000); //hide(speed）隐藏　speed控制速度，参数为slow、fast 或毫秒});$("button").dblclick(function(){ $("p").show(1000);});2,使用 toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素，toggle(speed) speed控制速度，参数为slow、fast 或毫秒<body> <button>隐藏/显示</button> <p>这是一个文本段落。</p> <p>这是另外一个文本段落。</p></body>$("button").click(function(){ $("p").toggle("slow");});(2) 淡入淡出 speed　可为"slow"、"fast" 或毫秒<body><button>点击 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body>1,fadeIn(speed) $("button").click(function(){ $("#div1").fadeIn(); //jQuery fadeIn() 用于淡入已隐藏的元素。 $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });2,fadeOut(speed) $("button").click(function(){ $("#div1").fadeOut(); //jQuery fadeOut() 方法用于淡出可见元素。 $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });3,fadeToggle(speed) $("button").click(function(){ $("#div1").fadeToggle(); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });4,fadeTo(speed) fadeTo(speed,opacity) opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); //jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });(3) 滑动 speed控制速度，参数为slow、fast 或毫秒1,slideDown(speed)<body> <div id="flip">点我滑下面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideDown("slow"); //slideDown() 方法用于向下滑动元素。 });2,slideUp(speed)<body> <div id="flip">点我拉起面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideUp("slow"); //slideUp() 方法用于向上滑动元素。 });3,slideToggle(speed)<style type="text/CSS"> #panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}#panel{ padding:50px; display:none;}</style><body> <div id="flip">点我，显示或隐藏面板。</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideToggle("slow"); //slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 });(4) 动画animate({params},speed,callback) 　创建自定义动画　params 参数定义形成动画的 CSS 属性。　speed 的值为"slow"、"fast" 或毫秒。<body> <button>开始动画</button> <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5',//opacity 属性设置元素的不透明级别。默认值: 1 css3 元素 height:'150px', width:'150px' }); });(5) 停止动画 stop() 方法用于在动画或效果完成前对它们进行停止。<style type="text/css"> #panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}#panel{ padding:50px; display:none;}</style></head><body> <button id="stop">停止滑动</button> <div id="flip">点我向下滑动面板</div> <div id="panel">Hello world!</div></body> $("#flip").click(function(){ $("#panel").slideDown(5000);//slideDown() 方法用于向下滑动元素。 }); $("#stop").click(function(){ $("#panel").stop(); //stop() 方法用于停止动画或效果，在它们完成之前。 });(6) callback()方法　函数在当前动画 100% 完成之后执行。以hide(speed,callback)举例<body> <button>隐藏</button> <p>我们段落内容，点击“隐藏”按钮我就会消失</p></body>$("button").click(function(){ $("p").hide('slow',function(){ alert('内容已经隐藏'); });});(7) Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）<body> <p id="p1">W3Cschool教程!!</p> <button>点我</button></body>$("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000);});

本文内容题材摘自w3cschool,为自己的学习文章，非教学文章，后面每天会更新内容，直到学完整个jqury. 如需查看题材来源：http://www.w3cschool.cn/jquery/

上一篇：【CSS】简易的页面侧边栏导航

下一篇：Windows下我的sublime text3