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 套件。