web开发中常用的jquery动画效果

1、隐藏&显示

设置元素的隐藏，显示功能，语法如下：
jquery show(speed ，callback);
jquery hide(speed ，callback);
jquery togger(speed ，callback);

说明：参数不是必须的，在有需要的时候添加即可。

应用示例：

$("button").click(function(){
   $('p').hide();//设置p元素隐藏
   $('p').show();//设置p元素显示
   $('p').togger();//切换显示
})

如果需要设置动画时间和回调函数，可以在函数中传递参数进去。

$('button').click(funciton(){
   $('p').hide(1000 , funciton(){
       alert('发生隐藏动作的时间为1s');
   })
})
//或者把回调函数单独写成一个函数，在回调函数的位置调用该函数
$('button').click(funciton(){
   $('p').hide(1000 , callback());
});
function callback(){
    alert('发生隐藏动作的时间为1s')
}

2、淡入&淡出

使元素的切换方式为淡入，淡出。主要有以下四种切换方式：
jquery.fadeIn(speed , callback);
jquery.fadeOut(speed , callback);
jquery.fadeTo(speed , opacity , callback );
jquery.fadeTogger(speend , callback);

使用示例：

$('button').click({
    $('p').fadeIn();//直接淡入；
    $('p').fadeIn('slow');//缓慢淡入；
    $('p').fadeIn(5000);//自定义时间淡入；
})
//fadeOut ， fadeTogger 的使用方法相同，fadeTo是指自定义一个淡出的透明度，而不是直接淡出为0
$('button').click(function(){
   $('p').fadeTo('slow' , 0.75);
   $('p').fadeTo(1000 , 0.15);
})

特别说明：回调函数的使用方式和hide()相同，可以直接在函数中实现，也可以定义后在回调函数中调用。

3、滑动

使元素以从下向上滑动的效果来出现，消失。主要有以下三种语法：
jquery.slideDown(speed , callback);
jquery.slideUp(speed , callback);
jquery.slideTogger(speed , callback);

使用示例

   $('button').click(function(){
      $('p').slideDown(1000);
      $('p').slideUp(1000);
   })
   $('button2').click(function(){
      $('p').slideTogger(1000);
   })

4、动画

用于创建自定义的动画属性，语法
$(dom).animate({param} , speed , callback);
其中：param是一组对象，是animate函数必须的参数，它定义了形成动画的css属性；
使用示例：

    $('button').click(funciton(){
        $('p').animate({left:200px},2000);
    })

特别说明：默认的情况下一个元素都有一个静态的属性，且无法移动，如果在使用animate设置left、right等位置相关的属性的时候，需把该元素的position设置为relative ， absolute ，fixed 等；

在animate中设置多个属性值时需要注意：属性的命名必须是camel（驼峰命名法）

使用示例：

   $('button').click(funciton(){
        $('p').animate({
            left:200px,
            paddingTop:20px,
            fontSize:12px;
         },2000);
     })

如果需要设置元素产生动画的位置相对于原来的位置，则会使用到动画中的相对值

  $('button').click(funciton(){
        $('p').animate({
            left:"+=200px",
            height:"+=150px";
            width:"+=200px"
         },2000);
     })

如果针对一个元素需要使用多个动画效果，默认的，jquery提供了一个队列的功能，jquery会逐一调用每一个animate方法。使用方法如下：

    $('button').click(function(){
        var dom = $('.dome');
        dom.animate({letf:'200px' , fontSize:'20px'});
        dom.animate({top:'200px',fontSize:'30px'});
        .....
    })