jQuery animate (スライダースライドエフェクトコード)_jquery

HTML

复制代代码如下:

<p>< ;a href="#" class="run">実行</a></p>
<div id="box">

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


CSS

复制代代码如下:

<style type="text/css">
ボディ {}{
マージン: 20px 自動;
パディング: 0;
幅: 580ピクセル;
フォント: 80%/120% Arial、Helvetica、サンセリフ;
}
a {}{
フォントの太さ: 太字;
色: #000000;
}
#box {}{
背景: #6699FF;
高さ: 100px;
幅: 100ピクセル;
位置: 相対;
}
</style>
<style type="text/css">body {}{ margin: 20px auto;パディング: 0;幅: 580ピクセル;フォント: 80%/120% Arial、Helvetica、サンセリフ;}a {}{ font-weight: 太字;カラー: #000000;}#box {}{ 背景: #6699FF;高さ: 100ピクセル;幅: 100ピクセル;位置: 相対;}</style>

JavaScript

复制代代码如下:

$(document).ready(function(){
$(".run").click(function(){

$("#box").animate({opacity: "0.1 ", 左: " =400"}, 1200)
.animate({不透明度: "0.4", 上: " =160", 高さ: "20", 幅: "20"}, "遅い")
.animate({不透明度: "1", 左: "0", 高さ: "100", 幅: "100"}, "遅い")
.animate({上: "0"}, " fast")
.slideUp()
.slideDown("slow")
return false;

});
});

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>