ITPub博客

首页 > 大数据 > 数据分析 > jQuery 动画 - animate() 方法

jQuery 动画 - animate() 方法

原创 数据分析 作者:金木大大大 时间:2023-12-18 10:33:50 0 删除 编辑

  jQuery animate()方法用于创建自定义动画。


  语法:


  $(selector).animate({params},speed,callback);


  必需的params参数定义形成动画的CSS属性。


  可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。


  可选的callback参数是动画完成后所执行的函数名称。


  下面的例子演示animate()方法的简单应用。它把<div>元素往右边移动了250像素:


  实例


  $("button").click(function(){


  $("div").animate({left:'250px'});


  http://www.jshk.com.cn/mb/reg.asp?kefu=xiaoding;//爬虫IP获取;


  });


  尝试一下»


  lamp默认情况下,所有HTML元素都有一个静态位置,且无法移动。


  如需对位置进行操作,要记得首先把元素的CSS position属性设置为relative、fixed或absolute!


  jQuery animate()-操作多个属性


  请注意,生成动画的过程中可同时使用多个属性:


  实例


  $("button").click(function(){


  $("div").animate({


  left:'250px',


  opacity:'0.5',


  height:'150px',


  width:'150px'


  });


  });


  尝试一下»


  lamp可以用animate()方法来操作所有CSS属性吗?


  是的,几乎可以!不过,需要记住一件重要的事情:当使用animate()时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等。


  同时,色彩动画并不包含在核心jQuery库中。


  如果需要生成颜色动画,您需要从jquery.com下载颜色动画插件。


  jQuery animate()-使用相对值


  也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上+=或-=:


  实例


  $("button").click(function(){


  $("div").animate({


  left:'250px',


  height:'+=150px',


  width:'+=150px'


  });


  });


  尝试一下»


  jQuery animate()-使用预定义的值


  您甚至可以把属性的动画值设置为"show"、"hide"或"toggle":


  实例


  $("button").click(function(){


  $("div").animate({


  height:'toggle'


  });


  });


  尝试一下»


  jQuery animate()-使用队列功能


  默认地,jQuery提供针对动画的队列功能。


  这意味着如果您在彼此之后编写多个animate()调用,jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用。


  实例1


  $("button").click(function(){


  var div=$("div");


  div.animate({height:'300px',opacity:'0.4'},"slow");


  div.animate({width:'300px',opacity:'0.8'},"slow");


  div.animate({height:'100px',opacity:'0.4'},"slow");


  div.animate({width:'100px',opacity:'0.8'},"slow");


  });


  尝试一下»


  下面的例子把<div>元素往右边移动了100像素,然后增加文本的字号:


  实例2


  $("button").click(function(){


  var div=$("div");


  div.animate({left:'100px'},"slow");


  div.animate({fontSize:'3em'},"slow");


  });


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70032566/viewspace-3000436/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: jQuery 的语法详解
请登录后发表评论 登录
全部评论

注册时间:2023-10-12

  • 博文量
    249
  • 访问量
    157739