浅谈jQuery效果函数

jQuery有很多的效果可以实现，比如说淡入淡出的效果：<html>

 <head><style>#box{width:200px;height:200px;background:red;opacity:1;}</style></head><body><div id="box"></div><input type="button" value="隐藏/显示"id="bt1"><br/><br/><input type="button" value="淡入"id="bt2"><br/><br/><input type="button" value="淡出"id="bt3"><br/><br/><input type="button" value="滑入"id="bt4"><br/><br/><input type="button" value="滑出"id="bt5"><br/><br/><input type="button" value="半透明"id="bt6"><br/><br/><input type="button" value="滑入/滑出"id="bt7"><br/><br/><input type="button" value="淡入入/淡出"id="bt7"><br/><br/></body><script src="jquery-1.6.js"></script><script>$（function（）{$（"#bt1"）.click（function（）{$（"#box"）.toggle（1000）}）,$（"#bt2"）.click（function（）{$（"#box"）.slideDown（1500）}）,$（"#bt3"）.click（function（）{$（"#box"）.slideUp（1500）}）,$（"#bt4"）.click（function（）{$（"#box"）.fadeIn（1000）}）,$（"#bt5"）.click（function（）{$（"#box"）.fadeOut（1000）}）,$（"#bt6"）.click（function（）{$（"#box"）.fadeTo（1500,0.4）}）,$（"#bt7"）.click（function（）{$（"#box"）.fadeToggle（1000）}）,$（"#bt8"）.click（function（）{$（"box"）.slideToggle（1500）}）}）</script></html>

jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>

<head><style>#box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}</style></head><body><div id="box"></div></body><script src="jquery-1.7.1.min.js"></script><script>$（function（）{str="我是中国人"$（"#box"）.html（str）setInterval（go,300）function go（）{str=str.substr（1）+str.substr（0,1）$（"#box"）.html（str）}}）</script></html>

jQuery可以用来实现一个删除功能的实现,比如：<html>

<head><style>#box{width:400px;height:200px;border:1px solid black;}</style></head><body><div id="box"><p id="a">第一a</p><p>第二</p><p id="a">第三a</p><p>第四</p></div><button id="del">删除</button><button id="cle">清空</button></body><script src="jquery-1.6.js"></script><script>$（function（）{$（"#del"）.click（function（）{$（"p"）.remove（"#a"）}）;$（"#cle"）.click（function（）{$（"#box"）.empty（）}）;}）</script></html>

jQuery还会做出一选课功能的实现,比如:<html>

<head><title></title><style>li{list-style:none;}#you{position:absolute;left:300px;top:10px;}ul{position:absolute;left:150px;top:10px;}</style><script src="jquery-1.6.js"></script><script>$（function（）{$（"button:first"）.click（function（）{$（"#zuo>option:selected"）.prependTo（$（"#you"））;//$（"#you"）.append（$（"#zuo>option:selected"）;}）$（"button:eq（1）"）.click（function（）{$（"#you>option:selected"）.appendTo（$（"#zuo"））;//$（"#you"）.append（$（"#zuo>option:selected"）;}）$（"button:eq（2）"）.click（function（）{$（"#zuo>option"）.appendTo（$（"#you"））;}）$（"button:eq（3）"）.click（function（）{$（"#you>option"）.appendTo（$（"#zuo"））;}）$（"button:eq（4）"）.click（function（）{ //$（"#zuo>option:first"）.before（$（"#zuo>option:selected"））$（"#zuo>option:selected"）.prependTo（$（"#zuo"））;}）$（"button:eq（5）"）.click（function（）{// $（"#zuo>option:last"）.after（$（"#zuo>option:selected"））$（"#zuo>option:selected"）.appendTo（$（"#zuo"））;}）$（"button:eq（6）"）.click（function（）{ $（"#zuo>option:selected"）.prev（）.before（$（"#zuo>option:selected"）） ;}）$（"button:eq（7）"）.click（function（）{ $（"#zuo>option:selected"）.next（）.after（$（"#zuo>option:selected"）） ;}）}）</script></head><body><select size="10" id="zuo" style="width:100px"><option>职业英语</option><option>高等数学</option><option>大学语文</option><option>大学物理</option><option>计算机基础</option><option>基本网页设计</option><option>c语言程序设计</option><option>数据结构</option><option>UI设计</option><option>产品脚本设计</option><option>产品脚本提高</option><option>产品脚本实战</option></select><ul><li><button>选择</button></li><li><button>退选</button></li><li><button>全选</button></li><li><button>全退</button></li><li><button>置顶</button></li><li><button>置底</button></li><li><button>上移</button></li><li><button>下移</button></li></ul><select size="10" id="you" style="width:100px"></select></body></html>

jQuery还能够实现下滑框功能:<！DOCTYPE html>

<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $（document）.ready（function（）{ $（".flip"）.click（function（）{$（".panel"）.slideDown（"slow"）; }）;}）;</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>jQuery能够实现简单的动画效果：<！DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $（document）.ready（function（）{ $（"button"）.click（function（）{$（"div"）.animate（{left:"250px"}）; }）;}）;</script> </head> <body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>jQuery能实现一个动画的开始与停止的功能:<html><head><style>#box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}</style></head><body><div id="box"></div><button id="bt">开始</button><button id="bt1">停止</button></body><script src="jquery-1.6.js"></script><script>$（function（）{$（"#bt"）.click（function（）{$（"div"）.animate（{left:"800px",top:"300px",width:"500px",height:"500px"},3000）}）,$（"#bt1"）.click（function（）{$（"div"）.stop（）;}）}）</script></html>

jQuery还能做一些向上轮播图片广告的功能:<html>

<head><style>#box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}ul{list-style:none;}img{width:600px;height:300px;}*{padding:0;margin:0;}</style></head><body><div id="box"><ul id="pic"><li><img src="1.png"></li><li><img src="2.png"></li><li><img src="3.png"></li><li><img src="4.png"></li><li><img src="1.png"></li></ul></div></body><script src="jquery-1.7.1.min.js"></script><script>$（function（）{m=0;p=setInterval（go,100）function go（）{m+=20;$（"#pic"）.css（"margin-top",-m+"px"）if（m>=1200）{m=0}}}）</script></html>

jQuery还能实现两个下拉展开于闭合的效果于一体的:<！DOCTYPE html>

<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$（document）.ready（function（） { $（"button"）.click（function（）{$（"#p1"）.css（"color","red"）.slideUp（2000）.slideDown（2000）; }）;}）;</script></head><body><p id="p1">jQuery 乐趣十足！</p><button>点击这里</button></body></html>

以上就是我分享给大家的，谢谢。
关于这篇jQuery效果函数就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。