快捷導(dǎo)航

jQuery animate(滑塊滑動(dòng)效果代碼)

更新時(shí)間：2010年01月01日 01:08:59 作者：

jQuery animate 滑塊滑動(dòng)效果,學(xué)習(xí)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

復(fù)制代碼代碼如下:

 
<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

復(fù)制代碼代碼如下:

 
$(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í)行]

您可能感興趣的文章:

相關(guān)文章

jQuery驗(yàn)證插件validation使用指南
jquery.validation.js在前端驗(yàn)證中使用起來非常方便,提供的功能基本上能滿足大部分驗(yàn)證需求，下面我們就來仔細(xì)研究下這款jQuery插件的具體使用方法。
2015-04-04
jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下
2014-04-04
基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個(gè)代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置，需要的朋友可以參考一下
2018-06-06
jQuery實(shí)現(xiàn)視頻展示效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
超漂亮的jQuery圖片輪播特效
這篇文章為大家分享了超漂亮的jQuery圖片輪播特效，支持Ajax加載數(shù)據(jù)，響應(yīng)式布局，支持移動(dòng)端觸屏，功能強(qiáng)大，感興趣的小伙伴們可以參考一下
2015-11-11
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-06-06
Jquery easyUI 更新行示例
這篇文章主要介紹了Jquery easyUI 更新行、更新指定的行,需要的朋友可以參考下
2014-03-03
jQuery.Validate驗(yàn)證庫的使用介紹
本篇文章介紹了，jQuery.Validate驗(yàn)證庫的使用。需要的朋友參考下
2013-04-04
jQuery選擇器簡明總結(jié)（含用法實(shí)例,一目了然）
jQuery 選擇器一直是 jquery 最神秘，最強(qiáng)大的一部分，當(dāng)然也是整個(gè) jquery 里面非?；A(chǔ)的
2014-04-04
Jquery 學(xué)習(xí)筆記（二）
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個(gè)人覺得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。
2009-10-10