jQuery實現(xiàn)移動 和 漸變特效的點擊事件
更新時間:2015年02月26日 11:06:26 投稿:hebedich
這里給大家分享的是一則使用jQuery實現(xiàn)移動和漸變特效的點擊事件效果,非常簡單實用,這里推薦給大家。
先看代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<style>
body{font-family: "微軟雅黑";width: 980px; margin: 0 auto; text-align: center;}
.box{
width: 300px;
height: 300px;
background: green;
border: 1px solid #e6e6e6;
margintop: 50px;
line-height: 200px;
position: absolute;
}
button{
border: none;
background: green;
width: 100px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
margin-top: 50px;
}
</style>
<body>
<button>點擊開始動畫</button>
<div class="box" ></div>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$(".box");
div.animate({height:'200px',opacity:'0.4'},"slow");
div.animate({width:'200px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
div.animate({right:'100px',opacity:'0.8'},"slow");
div.animate({bottom:'100px',opacity:'0.8'},"slow");
div.animate({left:'100px',opacity:'0.8'},"slow");
div.animate({top:'100px',opacity:'0.8'},"slow");
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$(".box");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
});
</script>
</body>
</html>
.animate 事件,是這個 里面的新的東西。解釋起來就是 使div 塊兒 變得有靈魂 可以移動。
Tips:
1、click 事件的 點擊節(jié)點的選擇
2、通過 var div=$(".box") 來選擇需要控制的 css 屬性
剩下的就要靠 自己去敲代碼,看效果 去理解其中的 意思。
您可能感興趣的文章:
- jquery無法為動態(tài)生成的元素添加點擊事件的解決方法(推薦)
- jQuery添加options點擊事件并傳值實例代碼
- jquery 觸發(fā)a鏈接點擊事件解決方案
- jQuery實現(xiàn)當(dāng)按下回車鍵時綁定點擊事件
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- jquery中交替點擊事件的實現(xiàn)代碼
- jquery實現(xiàn)點擊label的同時觸發(fā)文本框點擊事件的方法
- jQuery中slideUp 和 slideDown 的點擊事件
- jQuery實現(xiàn)點擊行選中或取消CheckBox的方法
- jQuery移除或禁用html元素點擊事件常用方法小結(jié)
相關(guān)文章
jquery原創(chuàng)彈出層折疊效果點擊折疊彈出一個層
今天整理最近項目里用到的一個小效果,點擊折疊彈出一個層給用戶填寫信息,感興趣的朋友可以學(xué)習(xí)下2014-03-03jQuery 淡出一個圖像到另一個圖像的實現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實現(xiàn)兩個圖片的淡出切換效果,需要的朋友可以參考下2013-06-06JQuery 自定義CircleAnimation,Animate方法學(xué)習(xí)筆記
最近對看了一些JQuery的基礎(chǔ)教程,被JQuery深深的吸引住了,以前用過Extjs,看了JQuery不禁感嘆,javascript還能這么些,真是太神奇了!2011-07-07