jQuery實(shí)現(xiàn)移動(dòng) 和 漸變特效的點(diǎn)擊事件
先看代碼:
<!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>點(diǎn)擊開始動(dòng)畫</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 事件,是這個(gè) 里面的新的東西。解釋起來就是 使div 塊兒 變得有靈魂 可以移動(dòng)。
Tips:
1、click 事件的 點(diǎn)擊節(jié)點(diǎn)的選擇
2、通過 var div=$(".box") 來選擇需要控制的 css 屬性
剩下的就要靠 自己去敲代碼,看效果 去理解其中的 意思。
- jquery無法為動(dòng)態(tài)生成的元素添加點(diǎn)擊事件的解決方法(推薦)
- jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼
- jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
- jQuery實(shí)現(xiàn)當(dāng)按下回車鍵時(shí)綁定點(diǎn)擊事件
- jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
- jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
- jQuery中slideUp 和 slideDown 的點(diǎn)擊事件
- jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
- jQuery移除或禁用html元素點(diǎn)擊事件常用方法小結(jié)
相關(guān)文章
jquery原創(chuàng)彈出層折疊效果點(diǎn)擊折疊彈出一個(gè)層
今天整理最近項(xiàng)目里用到的一個(gè)小效果,點(diǎn)擊折疊彈出一個(gè)層給用戶填寫信息,感興趣的朋友可以學(xué)習(xí)下2014-03-03jQuery+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家看,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果,需要的朋友可以參考下2013-06-06JQuery 自定義CircleAnimation,Animate方法學(xué)習(xí)筆記
最近對(duì)看了一些JQuery的基礎(chǔ)教程,被JQuery深深的吸引住了,以前用過Extjs,看了JQuery不禁感嘆,javascript還能這么些,真是太神奇了!2011-07-07