jQuery fadeIn ease

I use below jQuery script to fade in my dropdown-menu. How do I use easing in this example?

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

Answers 1

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

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

    To use different easing options in jQuery fadeIn/fadeOut, you need to fill in the second parameter

    Example:

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

    The existing ease option for jQuery will be swing and linear. If you need more options you will need to use jQuery UI suite

    From 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.


Related Articles