jquery中的动画是怎样用的(jq的动画)

jQuery animate()方法允许您创建自定义动画。
JQuery动画实例
框架
JQuery animation-animate()方法
jQuery animate()方法用于创建自定义动画。
语法：
$(选择器)。animate({params}，speed，callback)；
必需的params参数定义动画的CSS属性。
的可选速度参数指定效果的持续时间。它可以采用以下值：“慢”、“快”或毫秒。
的可选回调参数是动画完成后要执行的函数的名称。
下面的例子演示了animate()方法的简单应用。它将元素向右移动了250个像素：
例子
$(\’button\ ‘)。单击(function(){ $(\’p\ ‘)。animate({ left : ‘ 250 px ‘ })；});
试一试
默认情况下，所有HTML元素都有一个静态位置，不能移动。要操作位置，记得首先将元素的CSS position属性设置为relative、fixed或absolute！
JQuery animate()-操纵多个属性
请注意，在动画生成过程中可以同时使用多个属性：
例子
$(\’button\ ‘)。单击(function(){ $(\’p\ ‘)。animate({left:’250px ‘，opacity: ‘ 0.5 ‘，height:’150px ‘，width : ‘ 150 px ‘ })；});
可以用animate()方法操作所有CSS属性吗？是的，差不多！但是，有一点要记住：在使用animate()时，所有的属性名都必须用Camel符号书写，例如，paddingLeft而不是padding-left，marginRight而不是margin-right，等等。
同时，核心jQuery库中不包含彩色动画。
如果你需要生成彩色动画，你需要从jquery.com下载彩色动画插件。
JQuery animate()-使用相对值
您还可以定义一个相对值(该值相对于元素的当前值)。您需要在该值前面加上=或-=:
例子
$(\’button\ ‘)。单击(function(){ $(\’p\ ‘)。animate({left:’250px ‘，height:’=150px ‘，width : ‘=150 px ‘ })；});
试一试
JQuery animate()-使用预定义的值
您甚至可以将属性的动画值设置为“显示”、“隐藏”或“切换”:
例子
$(\’button\ ‘)。单击(function(){ $(\’p\ ‘)。animate({ height : ‘ toggle ‘ })；});
JQuery animate()-使用队列函数
默认情况下，jQuery为动画提供了队列功能。
这意味着如果您一个接一个地编写多个animate()调用，jQuery将创建一个包含这些方法调用的“内部”队列。然后逐一运行这些动画调用。
示例1
$(\’button\ ‘)。click(function(){ varp=$(\ ‘ p \ ‘)；p.animate({height:’300px ‘，opacity: ‘ 0.4 ‘ }，\ ‘ slow \ ‘)；p.animate({width:’300px ‘，opacity: ‘ 0.8 ‘ }，\ ‘ slow \ ‘)；p.animate({height:’100px ‘，opacity: ‘ 0.4 ‘ }，\ ‘ slow \ ‘)；p.animate({width:’100px ‘，opacity: ‘ 0.8 ‘ }，\ ‘ slow \ ‘)；});
试一试
以下示例将元素向右移动100像素，然后增加文本的字体大小：
示例2
$(\’button\ ‘)。click(function(){ varp=$(\ ‘ p \ ‘)；p.animate({left:’100px’}，\ ‘ slow \ ‘)；p.animate({fontSize:’3em’}，\ ‘ slow \ ‘)；});