jQuery 效果（二）

阅读更多

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；