jQuery 淡入淡出

Question

我使用下面的 jQuery 腳本淡入我的下拉菜單。 在這個例子中我如何使用easing ？

  $('ul.navbar-nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(50);
  }, 
  function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(50);
  });

Answer 1

正如jQuery 淡入文檔中提到的，

從 jQuery 1.4.3 開始，可以使用命名緩動函數的可選字符串。 緩動函數指定動畫在動畫中不同點的速度。 jQuery 庫中唯一的緩動實現是默認的，稱為swing ，和一個以恆定速度進行的，稱為linear 。 通過使用插件，可以使用更多緩動功能，最顯着的是jQuery UI 套件。

這是語法

$(selector).fadeIn(speed,easing,callback)

這是一個例子

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500,"linear");

Answer 2

fakeIn() 方法有 3 個參數。 您可以將緩動參數傳遞給fadeIn() 函數。

淡入淡出（）語法：

$(selector).fadeIn(speed,easing,callback)

更改您的代碼：

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(50);

到：

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(50,"Easing Type");

有關更多詳細信息，請查看fadeIn() 方法：

https://www.w3schools.com/jquery/eff_fadein.asp

Answer 3

$(selector).fadeIn(speed,easing,callback)

$(selector).fadeOut(speed,easing,callback)

要在jQuery的fadeIn/fadeOut中使用不同的緩動選項，需要填寫第二個參數

例子：

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(50,'linear',function(){});

---

現有的 jQuery 簡易選項將是swing和linear 。 如果您需要更多選項，則需要使用jQuery UI 套件

來自 jQuery淡入淡出文檔

寬松

從 jQuery 1.4.3 開始，可以使用命名緩動函數的可選字符串。 緩動函數指定動畫在動畫中不同點的速度。 jQuery 庫中唯一的緩動實現是默認的，稱為swing，和一個以恆定速度進行的，稱為linear。 使用插件可以使用更多緩動功能，尤其是 jQuery UI 套件。