javascriptjqueryfadeinjquery-easing

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);
  });
Solution

  • As mentioned in 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.

    Here is the syntax

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

    Here is an example

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