一、jQuery动画效果

jQuery动画效果有以下几种

1.显示与隐藏 （hide and show)
2.淡入、淡出 (fadeIn and fadeOut)
3.滑动 (slideUp and slideDown)
4.自定义动画 （animate）

一、显示与隐藏（hide and show)

//hide（隐藏）
$('div').hide(speed,callback) 
 // 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称
$("div").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });   //  点击的时候1000毫秒完成隐藏一次后弹出("Hide() 方法已完成!"),第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）
//  show（显示）
$('div').show(speed,callback)   //用法同hide

$('div').toggle(speed,callback)  // toggle是切换，用法同show和hide相同

二、淡入、淡出 (fadeIn and fadeOut)

$('div').fadeIn(speed,callback)  // 淡入
$('div').fadeOut(speed,callback)  // 淡出
$('div').fadeToggle(speed,callback) //切换淡入淡出
//  用法同显示隐藏相同

三、滑动 (slideUp and slideDown)

$('div').slideUp  (speed,callback)  // 向上滑动隐藏
$('div').slideDown (speed,callback)  // 向下滑动隐藏
$('div').slideToggle (speed,callback)  // 切换滑动隐藏
//  用法同显示隐藏相同

四、自定义动画

$('#btn').click(function(){ 
   $('#second').animate({
      width:'100px',
       height:'200px',
       marginLeft:'300px',
       opacity:'0.5'
       },1000)
})  //  自定义动画参数必须是具体的数值

注：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
animate（）里面第一个参数必须是定义形成动画的 CSS 属性，后面的参数可以写可以不写