Jquery實現(xiàn)簡單的動畫效果代碼
更新時間：2012年03月18日 13:51:40 作者：
Jquery實現(xiàn)簡單的動畫效果代碼，需要的朋友可以參考下
復制代碼 代碼如下:
<!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");//設置透明度
$("#panel").click(function () {
$(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)//在3秒內(nèi)向右移動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>
相關文章
這篇文章主要介紹了Jquery 實現(xiàn)圖片輪換,雖然還有點小問題，但是影響不大，還是推薦給大家，需要的朋友可以參考下2015-01-01
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個jquery的擴展，這樣就可以很容易實現(xiàn)對textarea控制最大長度了。2011-09-09
jQuery在vs2008及js文件中的無智能提示的解決方法
我通過下面方法實現(xiàn)了jQuery在VS2008及js文件中的智能提示的，希望對朋友們有所幫助。2010-12-12
jqPlot是一個灰常強大的圖表工具，曲線，柱狀，餅圖，應該有盡有，更要命的是，調(diào)用方便~~2016-06-06
本文主要對表格的簡單應用：表格變色;表格展開關閉;表格內(nèi)容篩選進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了jquery中change()用法,實例分析了change的功能、定義及具體的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jqgrid實現(xiàn)簡單的單行編輯功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了jQuery新窗口打開外鏈接的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現(xiàn)
jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現(xiàn)2010-04-04
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關操作,jQuery是最為流行的JavaScript庫,需要的朋友可以參考下2015-08-08