HTML 代码复制到剪贴板
-
<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>
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;
-
-
});
-
});
效果: http://www.bbon.cn/wp-content/uploads/demo/jquery/chainable-effects.html