jQuery animate(滑块滑动)

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;     580px;    font: 80%/120% Arial, Helvetica, sans-serif;}a {}{    font-weight: bold;    color: #000000;}#box {}{    background: #6699FF;    height: 100px;     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",  "20"}, "slow")
•         .animate({opacity: "1", left: "0", height: "100",  "100"}, "slow")
•         .animate({top: "0"}, "fast")
•         .slideUp()
•         .slideDown("slow")
•         return false;
•     
•     });
• });

$(document).ready(function(){    $(".run").click(function(){            $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)        .animate({opacity: "0.4", top: "+=160", height: "20",  "20"}, "slow")        .animate({opacity: "1", left: "0", height: "100",  "100"}, "slow")        .animate({top: "0"}, "fast")        .slideUp()        .slideDown("slow")        return false;        });});


效果: http://www.bbon.cn/wp-content/uploads/demo/jquery/chainable-effects.html