jQuery实现简单的动画

1.淡入淡出效果

　　fadeIn()  淡入隐藏的元素

$(selector).fadeIn(speed,callback);
/*  参数
     speed:效果时长。可取的值：slow、fast、毫秒数
     callback:过渡完成后，所执行的方法名称 
*/
$("div").fadeIn(3000);

　　fadeOut() 淡出可见的元素    fadeToggle()  切换淡入淡出效果

　　fadeTo()  渐变设置元素的不透明度

$(selector).fadeTo(speed,opacity,callback);
/*  参数
     speed:效果时长。可取的值：slow、fast、毫秒数
     opacity:不透明度的值，介于0-1之间
     callback:过渡完成后，所执行的方法名称 
*/
$("div").fadeTo('slow',0.7);

2.滑动效果

　　slideDown()  向下滑动元素

$(selector).fadeDown(speed,callback);
/*  参数
     speed:效果时长。可取的值：slow、fast、毫秒数
     callback:过渡完成后，所执行的方法名称 
*/
$("div").fadeDown(3000);

　　slideUp()、slideToggle()用法同上

3.自定义动画

　　animate()

$(selector).animate({params},speed,callback);
/*  参数
     params:形成动画的css属性
     speed:效果时长。可取的值：slow、fast、毫秒数
     callback:过渡完成后，所执行的方法名称 
*/
$("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      '150px'
});

注意：如果遇到中间有连接字符的属性，第二个字母需要大写。例：marginLeft

　　　可以使用相对值(+=、-=)

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    '+=150px'
  });
});

 　　可以使用预定义的值，将属性的动画值设为show、hide、toggle

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

 　　可以调用多个动画

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
});

 4.停止动画

　　stop()

$(selector).stop(stopAll,goToEnd);
/* 参数：
    stopAll：是否清除动画队列，默认为false，即仅停止活动的动画
    goToEnd：是否立即完成当前动画，默认为false
*/  
$("div").stop();  //停止当前激活的动画，但还可以在动画列表中再次激活          
$("div").stop(true); //停止当前动画，并清除动画队列，所有的动画都会停止         
$("div").stop(true,true);  //快速完成动作，并停止它