jQuery动画效果

时间 2019-11-08

标签 jquery 动画效果栏目 JQuery 繁體版

原文原文链接

jQuery动画效果

1.显示动画

无参数,让指定的元素显现出来,底层经过display:block实现ide
- ```
   $("div").show();
```
经过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕函数
- ```
 $('div').show(3000);
```
- 参数动画
  - slow 慢:600msthis
  - normal 正常 400msspa
  - fast 快:200msorm
- 动画执行完毕后当即执行回调函数回调函数
  - ```
    //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()it

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

4.滑入和滑出

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

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

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

 $(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(),