jQuery animate()动画效果

时间:2022-12-01 20:52:14

1.jQuery动画效果

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

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性;
//可选的 speed 参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//可选的 callback 参数是动画完成后所执行的函数名称;

下面为几个实例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
//点击button按钮时div块向左右(取决于当前位置)移动的同时放大150px;
//其中'+='为相对变化,再次点击button时div块继续放大150px;


$("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");
});
//编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列,然后逐一运行这些 animate 调用;


$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle";
//点击button时,div块向上收缩,再次点击向下展开;

 2.jQuery停止动画

jQuery stop() 方法用于停止动画或效果,在它们完成之前

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列,默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行;
//可选的 goToEnd 参数规定是否立即完成当前动画,默认是 false;

转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2257182