jQuery animate(滑块滑动效果代码)

　　<p><a href="#" class="run">Run</a></p>

　　<div id="box">

　　</div>

　　<p><a href="#" class="run">Run</a></p><div id="box"></div>

　　<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>

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

　　});

　　});