jQuery animate(滑塊滑動(dòng)效果代碼)
更新時(shí)間：2010年01月01日 01:08:59 作者：
jQuery animate 滑塊滑動(dòng)效果,學(xué)習(xí)jquery的朋友可以看下。
HTML
復(fù)制代碼 代碼如下:
<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需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- Jquery+CSS3實(shí)現(xiàn)一款簡(jiǎn)潔大氣帶滑動(dòng)效果的彈出層
- jQuery AnythingSlider滑動(dòng)效果插件
- jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來(lái)選擇數(shù)字的方法
- jQuery層動(dòng)畫(huà)定位滑動(dòng)效果的方法
- jquery左右全屏大尺寸多圖滑動(dòng)效果代碼分享
- jQuery實(shí)現(xiàn)圖片滑動(dòng)效果
- jQuery實(shí)現(xiàn)彈窗下底部頁(yè)面禁止滑動(dòng)效果
- jQuery滑動(dòng)效果實(shí)現(xiàn)方法分析
相關(guān)文章
jquery.validation.js在前端驗(yàn)證中使用起來(lái)非常方便,提供的功能基本上能滿足大部分驗(yàn)證需求，下面我們就來(lái)仔細(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
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章為大家分享了超漂亮的jQuery圖片輪播特效，支持Ajax加載數(shù)據(jù)，響應(yīng)式布局，支持移動(dòng)端觸屏，功能強(qiáng)大，感興趣的小伙伴們可以參考一下2015-11-11
基于jQuery實(shí)現(xiàn)的當(dāng)離開(kāi)頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開(kāi)頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-06-06
這篇文章主要介紹了Jquery easyUI 更新行、更新指定的行,需要的朋友可以參考下2014-03-03
jQuery.Validate驗(yàn)證庫(kù)的使用介紹
本篇文章介紹了，jQuery.Validate驗(yàn)證庫(kù)的使用。需要的朋友參考下2013-04-04
jQuery選擇器簡(jiǎn)明總結(jié)（含用法實(shí)例,一目了然）
jQuery 選擇器一直是 jquery 最神秘，最強(qiáng)大的一部分，當(dāng)然也是整個(gè) jquery 里面非常基礎(chǔ)的2014-04-04
從最開(kāi)始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡(jiǎn)直是同出一轍啊，CSS的選擇器語(yǔ)法個(gè)人覺(jué)得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒(méi)有多少疑問(wèn)了。2009-10-10