您的位置：首页 > Web前端 > jquery > 正文

jquery中animate

更多时间：2014-8-10 类别：Web前端浏览量：2638

jquery中animate

jquery中animate

一、query中animate函数定义

animate(params, [duration], [easing], [callback])

各参数的说明如下：

params：一组包含作为动画属性和终值的样式属性和及其值的集合。

duration(可选)：默认是 "normal"。动画时长，三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)。

easing(可选)：规定在不同的动画点中设置动画速度的 easing 函数。要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

callback：动画完成时执行的函数。

二、query中animate示例

JScript 代码复制

// 在一个动画中同时应用三种类型的效果
$("#go").click(function()...{
  $("#block").animate(...{ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

JScript 代码复制


$("#right").click(function()...{
  $(".block").animate(...{left: '+50px'}, "slow");
});

$("#left").click(function()...{
  $(".block").animate(...{left: '-50px'}, "slow");
});

在600毫秒内切换段落的高度和透明度

JScript 代码复制


$("p").animate(...{
   height: 'toggle', opacity: 'toggle'
 }, "slow");

用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

JScript 代码复制


$("p").animate(...{
   left: 50, opacity: 'show'
 }, 500);

一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。

JScript 代码复制


$("p").animate(...{
   opacity: 'show'
 }, "slow", "easein");

标签：jquery

上一篇：C#插入排序

下一篇：SQL Server表误删记录如何恢复

您可能感兴趣

jquery中animate

jquery中animate

热门推荐

排行榜