HTML 复制代码 代码如下: <p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box"></div> CSS 复制代码 代码如下: <style type="text/css"> body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a {}{ font-weight: bold; color: #000000; } #box {}{ background: #6699FF; height: 100px; width: 100px; position: relative; } </style> <style type="text/css">body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif;}a {}{ font-weight: bold; color: #000000;}#box {}{ background: #6699FF; height: 100px; width: 100px; position: relative;}</style> JavaScript 复制代码 代码如下: $(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); }); Chainable Transition Effects body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a { font-weight: bold; color: #000000; } #box { background: #6699FF; height: 100px; width: 100px; position: relative; } Run [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　jQuery 数据缓存data(name, value)详解及实现

作为一名程序员，一提到“缓存”你很容易联想到“客户端（浏览器缓存）”和“服务器缓存”。客户端缓存是存在浏览者电脑硬盘上的，即浏览器临时文件夹，而服务器缓存是存在服务器内存中，当然在一些高级应用场合也>>>详细阅读

本文标题：jQuery animate(滑块滑动效果代码)

地址：http://www.17bianji.com/kaifa2/JS/27331.html

 1/2    1