jQuery-动画点击淡化消失
生活随笔
收集整理的這篇文章主要介紹了
jQuery-动画点击淡化消失
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><title> new document </title><meta charset="utf-8"><style>img{position:absolute}</style></head><body><h1>練習：jQuery萬能動畫函數</h1><img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"><script src="js/jquery-1.11.3.js"></script><script>//找到所有img中第1個設置其left為0//找到所有img中第2個設置其left為200px//找到所有img中第3個設置其left為400px//找到所有img中第4個設置其left為600px$("img").each(function(i){$(this).css("left",i*200)}).click(function(){//為所有img綁定單擊事件//對當前img啟動動畫: //width->400,height->300,opacity->0//2s//線性//動畫結束: 移除當前img$(this).animate({width:400,height:300,opacity:0},2000,"linear",function(){//this->當前正在執行操作的對象$(this).remove();});});</script></body>
</html>
?
轉載于:https://www.cnblogs.com/longly/p/6396070.html
總結
以上是生活随笔為你收集整理的jQuery-动画点击淡化消失的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux系统默默改变了人类世界的生活方
- 下一篇： 2017 一个开始