jQuery动画效果

1.显示动画

无参数,让指定的元素显现出来,底层通过display:block实现
- ```
   $("div").show();
```
通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕
- ```
 $('div').show(3000);
```
- 参数
  - slow 慢:600ms
  - normal 正常 400ms
  - fast 快:200ms
- 动画执行完毕后立即执行回调函数
  - ```
    //show(毫秒值，回调函数;
       $("div").show(5000,function () {
           alert("动画执行完毕！");
       );
```

2.隐藏动画

     $(selector).hide();
 
     $(selector).hide(1000); 
 
     $(selector).hide("slow");
 
     $(selector).hide(1000, function(){});

3.开关式显示隐藏动画

```
 $('#box').toggle(3000,function(){});
```
显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide()

     $('#btn').click(function(){
             $('#box').toggle(3000,function(){
                 $(this).text('盒子出来了');    
                 if ($('#btn').text()=='隐藏') {
                     $('#btn').text('显示');    
                 }else{
                     $('#btn').text('隐藏');    
                 }
             });
         })

4.滑入和滑出

滑入,下拉动画,显示元素

 $(selector).slideDown(speed, 回调函数);

滑出,上拉动画,隐藏元素

 $(selector).slideUp(speed, 回调函数);

滑入滑出动画效果切换

 $(selector).slideToggle(speed, 回调函数);

5.淡入淡出效果

淡入动画效果,
- ```
  $(selector).fadeIn(speed, callback);
```
淡出动画效果
- ```
 $(selector).fadeOut(1000);
```

淡入淡出动画效果来回切换

  $(selector).fadeToggle('fast', callback);

6.自定义动画

  $(selector).animate({params}, speed, callback);

作用:执行一组CSS属性的自定义动画
- 第一个参数:要执行动画的CSS属性(必选)
- 第二个参数:执行动画的时长:可选
- 第三个动画:动画执行完毕后,立即执行的回调函数(可选)

7.停止动画

```
 $(selector).stop(true, false);
```
参数说明
- 第一个参数:true表示后续动画不执行,false表示后续动画执行
- 第二个参数:true表示立即执行完成当前动画,false表示立即停止当前动画
- 如果参数都不写,默认两个参数都是false,实际常用的是stop(),