javascript - jQuery 淡入轻松

Question

我使用下面的 jQuery 脚本淡入下拉菜单。在此示例中如何使用缓动？

  $('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");