jQuery学习笔记5——自定义动画方法animate() 一

在jQuery中不但提供了一些简单的动画方法如show(),hide()可以同时修改元素的多个样式高度、宽度和不透明度;fadeOut(),fadeIn()只会修改元素的不透明度;slideDown(),slideUp()只会改变元素的高度。而且提供了一个可以自定义动画的方法animate()方法。

animate(parama,speed,callback);

1)parama:一个包含样式属性及值的映谢,比如{property1:"value",property2:"value",……}

2)speed:速度参数,可选。

3)callback:在动画完成时执行的函数,可选。

先看一个简单的例子:

ContractedBlock.gif ExpandedBlockStart.gif Code
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>自定义动画方法animate()title>
<script language="javascript" src="jquery-1.3.1.js">script>
<style type="text/css">
ExpandedBlockStart.gifContractedBlock.gif#panel
{ position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer;}
style>
<script language="javascript">
ExpandedBlockStart.gifContractedBlock.gif     $(function()
{
ExpandedSubBlockStart.gifContractedSubBlock.gif        $(
"#panel").click(function(){
ExpandedSubBlockStart.gifContractedSubBlock.gif            $(
this).animate({left:"500px"},3000);
        }
);
     }
)
script>
head>
<body>
<div id="panel">div>
body>
html>

 在这里我们实现了一个简单的横向飘动的例子。

 只要把{left:"500px"}修改成{left:"+=500px"}这样我们就可以实现一个加速的飘动效果。

 我们还可以添加多个样式,从而实现更多的动画效果如{left:"500px",width:"300px",height:"300px"}

转载于:https://www.cnblogs.com/guopei/articles/1521340.html

你可能感兴趣的:(jQuery学习笔记5——自定义动画方法animate() 一)