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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。