<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel控制Div運動，由大到小變化。</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
 $("#panel").css("opacity", "0.5");//設(shè)置不透明度
 $("#panel").click(function(){
  $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
   .animate({top: "200px" , width :"200px"}, 3000 ,function(){
    $(this).css("border","5px solid blue");
  })
 });
 });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery圖片放大鏡效果
這篇文章主要為大家詳細(xì)介紹了jquery圖片放大鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
JQuery通過Ajax提交表單并返回結(jié)果
在開始介紹使用JQuery提交表單之前，先看一下非Ajax提交表單的形式
2011-07-07
基于jQuery實現(xiàn)復(fù)選框的全選全不選反選功能
本文分享一段基于jQuery實現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼，有需要的小伙伴直接帶走吧
2014-11-11
jQuery編寫QQ簡易聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery編寫QQ簡易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時，通過net監(jiān)聽，發(fā)現(xiàn)調(diào)用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行
2016-12-12
JQuery學(xué)習(xí)筆記實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
為了保證前臺頁面的整潔，我們習(xí)慣性地將CSS放入一個單獨的.CSS文件中以便調(diào)用，而JS也同樣可以放到單獨的JS文件中去，并且頁面上的事件如onclick，onmouseover也可以分離出來，現(xiàn)在網(wǎng)上比較流行JQuery
2008-11-11
jquery ready函數(shù)、css函數(shù)及text()使用示例
想必大家對jquery的ready函數(shù)、css函數(shù)、text()并不陌生吧，其實很好理解的，接下來有個不錯的示例，如果你對此理解還是很模糊可以參考下
2013-09-09
jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jQuery插件編寫步驟詳解
這篇文章主要介紹了jQuery插件編寫步驟,詳細(xì)分析了jQuery實現(xiàn)插件功能的具體步驟與相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jQuery中 delegate使用的問題
本文主要給大家介紹的是在jQuery中使用delegate的時候遇到的幾個小小的坑，主要是習(xí)慣了使用bind,live，一時改不過來的問題，這里記錄下來推薦給大家。
2015-07-07