Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果代碼
更新時(shí)間：2012年03月18日 13:51:40 作者：
Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果代碼，需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://demo.jb51.net/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#panel").css("opacity", "0.1");//設(shè)置透明度
$("#panel").click(function () {
$(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)//在3秒內(nèi)向右移動(dòng)400px,高度放大200px，透明度改為1
.animate({ top: "200px,width:200px" }, 3000)
.fadeOut("slow"); //以淡出的方式隱藏
});
})
</script>
</head>
<body>
<div id="panel" style=" position:relative; background-color:Olive; height:100px; width:100px; border:1px; border-color:Aqua;">
</div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了Jquery 實(shí)現(xiàn)圖片輪換,雖然還有點(diǎn)小問(wèn)題，但是影響不大，還是推薦給大家，需要的朋友可以參考下2015-01-01
TextArea不支持maxlength的解決辦法(jquery)
自己寫(xiě)了一個(gè)jquery的擴(kuò)展，這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09
jQuery在vs2008及js文件中的無(wú)智能提示的解決方法
我通過(guò)下面方法實(shí)現(xiàn)了jQuery在VS2008及js文件中的智能提示的，希望對(duì)朋友們有所幫助。2010-12-12
jqPlot是一個(gè)灰常強(qiáng)大的圖表工具，曲線(xiàn)，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~2016-06-06
本文主要對(duì)表格的簡(jiǎn)單應(yīng)用：表格變色;表格展開(kāi)關(guān)閉;表格內(nèi)容篩選進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了jquery中change()用法,實(shí)例分析了change的功能、定義及具體的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jqgrid實(shí)現(xiàn)簡(jiǎn)單的單行編輯功能
這篇文章主要介紹了jqgrid實(shí)現(xiàn)簡(jiǎn)單的單行編輯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了jQuery新窗口打開(kāi)外鏈接的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)
jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)2010-04-04
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關(guān)操作,jQuery是最為流行的JavaScript庫(kù),需要的朋友可以參考下2015-08-08