---本系列文章所用使用js均可在本博客文件中找到

???? 本節用jQuery完一個簡易的動畫效果，一個小驢跑跑的效果。和一個類似qq面板效果。大致也分為三步：添加jquery-1.8.3.js文件。這個是不可缺少的，以下文章都需要添加，下面不再一一強調。隨后添加圖片，寫jQuery代碼：

---

?

一，小驢跑跑

---

圖片添加：

?<image? src="1.gif" id="im" />

編寫Jqery代碼：

$('#im').animate({ 'left': '490px', 'top': '250px' }).animate({ 'left': '1000px', 'top': '550px', 'width': '200px', 'height': '200px' }).animate({ 'left': '1200px', 'top': '190px', 'width': '60px', 'height': '80px' }).animate({ 'left': '0px', 'top':'0px' });

?

注釋：調用animate方法，里面參數可以設置坐標，可以在移動過程設置圖片大小

效果：

---

?

二，我的同學錄

---

?

1，引用js代碼

2，編寫html文件并設置樣式

<div id="dv"><ul id="ul"><li>大學同學<ul><li>王永威</li><li>賀亞東</li><li>張文陽</li></ul></li><li>高中同學<ul><li>閆飛</li><li>小明</li><li>孟軻</li></ul></li><li>初中同學<ul><li>韓劍南</li><li>韓建北</li><li>韓亞紅</li></ul></li></ul></div>

?

樣式設置：

<style type="text/css">#dv{width:150px;height:400px;border:1px solid black;}#ul{list-style-type:none;margin:0px;padding:0px;}#ul li{text-align:center;font-size:medium;color:White;cursor:pointer;border-bottom:3px solid grey;background-color:Orange;}#ul li ul{padding:0px;margin:0px;display:none;list-style-type:none;}#ul li ul li{font-size:medium;color:Black;background-color:White;text-align:left;}</style> View Code

jQuery代碼實現效果：

?

$('#ul>li').click(function () {$('ul', $(this)).toggle(200);//$('ul', $(this)).show(200);$(this).siblings().children('ul').hide(200);})

?

?

效果圖：

?

---

附錄：顯示，隱藏和顯隱效果的jQuery代碼

---

$('#but1').click(function () {$('#dv').css('background-color','blue').show(1000);});$('#but2').click(function () {$('#dv').hide(1000);});$('#but3').click(function () {$('#dv').toggle(1000);});

?

?

轉載于:https://www.cnblogs.com/baiboy/p/3153033.html

總結

以上是生活随笔為你收集整理的【jQuery小实例】---2自定义动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。