jQuery animate(滑塊滑動(dòng)效果代碼)

更新時(shí)間：2010年01月01日 01:08:59 作者：

jQuery animate 滑塊滑動(dòng)效果,學(xué)習(xí)jquery的朋友可以看下。

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

復(fù)制代碼代碼如下:

 
<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

復(fù)制代碼代碼如下:

 
$(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; 

}); 
}); 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Chainable Transition Effects</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> <script type="text/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;          }); }); </script> <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> </head> <body> <p><a href="#" class="run">Run</a></p> <div   class="dbrfbpd"   id="box"> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: