jQuery實(shí)現(xiàn)動(dòng)畫效果的簡單實(shí)例
一、需求原因
目前jQuery已經(jīng)是一個(gè)比較成熟的框架了,而且基于他的插件也有上百種,本例我手動(dòng)用jQuery實(shí)現(xiàn)一個(gè)動(dòng)畫效果的例子。
二、具體實(shí)現(xiàn)
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQuery實(shí)現(xiàn)動(dòng)畫效果</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<style type="text/css">
#test {
position:relative;
width:100px;
height:100px;
border:1px solid #0050d0;
background:#96e555;
cursor:pointer;
}
</style>
<script type="text/javascript">
$(function(){
$("#test").css("optcity","0.5");//設(shè)置不透明
$("#test").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},300)
.animate({top:"200px",width:"200px"},300)
.fadeOut("slow");
});
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
三、運(yùn)行結(jié)果
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- 鋒利的jQuery 要點(diǎn)歸納(三) jQuery中的事件和動(dòng)畫(下:動(dòng)畫篇)
- 鋒利的jQuery 要點(diǎn)歸納(三) jQuery中的事件和動(dòng)畫(上:事件篇)
- JQuery選擇器綁定事件及修改內(nèi)容的方法
- jQuery 處理頁面的事件詳解
- jQuery中ready事件用法實(shí)例
- jquery事件preventDefault()方法用法實(shí)例
- 淺談jQuery事件綁定原理
- 用隊(duì)列模擬jquery的動(dòng)畫算法實(shí)例
- 基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效
- JQuery中的事件及動(dòng)畫用法實(shí)例
相關(guān)文章
jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效,一段清新可愛的焦點(diǎn)圖輪播代碼,有需要的小伙伴可以參考下2015-09-09jQuery實(shí)現(xiàn)錨點(diǎn)scoll效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)錨點(diǎn)scoll效果,實(shí)例分析了錨點(diǎn)scoll效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery利用鍵盤上下鍵移動(dòng)表格內(nèi)容
這篇文章主要為大家詳細(xì)介紹了jQuery利用鍵盤上下鍵移動(dòng)表格內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jquery trigger函數(shù)執(zhí)行兩次的解決方法
這篇文章主要介紹了jquery trigger函數(shù)執(zhí)行兩次的解決方法,詳細(xì)分析了trigger函數(shù)執(zhí)行兩次的原因與響應(yīng)的解決技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-02-02遍歷json獲得數(shù)據(jù)的幾種方法小結(jié)
下面小編就為大家?guī)硪黄闅vjson獲得數(shù)據(jù)的幾種方法小結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01Json2Template.js 基于jquery的插件 綁定JavaScript對(duì)象到Html模板中
Json2Template.js是一個(gè)Jquery插件, 用來綁定JavaScript對(duì)象到Html模板中2011-10-10