jQuery控制DIV層實現由大到小，由遠及近動畫變化效果
更新時間：2015年10月09日 10:22:42 作者：企鵝
這篇文章主要介紹了jQuery控制DIV層實現由大到小，由遠及近動畫變化效果,涉及jQuery基于animate方法操作頁面元素實現動畫漸變效果的相關技巧,需要的朋友可以參考下
本文實例講述了jQuery控制DIV層實現由大到小，由遠及近動畫變化效果。分享給大家供大家參考。具體如下：
這里介紹jQuery控制DIV由大到小，由遠及近動畫變化效果，使用jquery生成動畫效果的一個小例子，希望大家喜歡。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/
具體代碼如下：
<!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");//設置不透明度
$("#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程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了jquery圖片放大鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在開始介紹使用JQuery提交表單之前，先看一下非Ajax提交表單的形式2011-07-07
本文分享一段基于jQuery實現的復選框全選、全不選、反選功能的代碼，有需要的小伙伴直接帶走吧2014-11-11
這篇文章主要為大家詳細介紹了jQuery編寫QQ簡易聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數據時，通過net監(jiān)聽，發(fā)現調用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行2016-12-12
為了保證前臺頁面的整潔，我們習慣性地將CSS放入一個單獨的.CSS文件中以便調用，而JS也同樣可以放到單獨的JS文件中去，并且頁面上的事件如onclick，onmouseover也可以分離出來，現在網上比較流行JQuery2008-11-11
jquery ready函數、css函數及text()使用示例
想必大家對jquery的ready函數、css函數、text()并不陌生吧，其實很好理解的，接下來有個不錯的示例，如果你對此理解還是很模糊可以參考下2013-09-09
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery插件編寫步驟,詳細分析了jQuery實現插件功能的具體步驟與相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
本文主要給大家介紹的是在jQuery中使用delegate的時候遇到的幾個小小的坑，主要是習慣了使用bind,live，一時改不過來的問題，這里記錄下來推薦給大家。2015-07-07