【jQuery小实例】---2自定义动画

---本系列文章所用使用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方法，里面参数可以设置坐标，可以在移动过程设置图片大小

效果：

<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);
});