jQuery animate(滑塊滑動效果代碼)
更新時間：2010年01月01日 01:08:59 作者：
jQuery animate 滑塊滑動效果,學習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
復制代碼 代碼如下:
<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
復制代碼 代碼如下:
$(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;
});
});
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結 ，需要的朋友參考下2016-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
在Web的世界里，按鈕對于我們來說再也普通不過了，當然也用得比較多。今天這篇文章我主要向大家分享20個基于jQuery和CSS技術的按鈕，這些基于jQuery的按鈕都非同凡響，所以我在標題里用了“令人驚嘆”這一個詞2012-01-01
這篇文章介紹了jquery彈出關閉遮罩層實例，有需要的朋友可以參考一下2013-08-08
JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法
今天小編就為大家分享一篇JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jQuery使用fadeout實現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實現(xiàn)元素漸隱效果的方法,實例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的，只能供大家選擇，今天小編給大家分享基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載，需要的朋友參考下2016-02-02
使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素，下面與大家分享下如何利用jQuery插件leanModal建立一個常規(guī)模態(tài)窗口2013-08-08
這篇文章主要詳細介紹了一些jQuery功能函數(shù)，例如瀏覽器檢測，字符串處理、數(shù)組的編輯等,需要的朋友可以參考下2015-02-02