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 fadeIn documentation、

所述

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

语法如下

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

这是一个例子

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

Answer 2

fadeIn() 方法有 3 个参数。您可以将缓动参数传递给 fadeIn() 函数。

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)

要在jQueryfadeIn/fadeOut中使用不同的缓动选项，需要填写第二个参数

示例：

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

jQuery 的现有缓动选项将是 swing 和 linear。如果您需要更多选项，则需要使用 jQuery UI suite

来自 jQuery fadeIn documentation

Easing

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

jQuery 淡入轻松

jQuery fadeIn ease

javascript

jquery

fadein

jquery-easing