jQuery fadeIn ease

Question

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

Answer 1

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");

Answer 2

fadeIn() method has 3 parameters. You can pass easing parameter to fadeIn() function.

fadeIn() syntax:

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

Change your code from:

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

To:

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(50,"Easing Type");

For more details check fadeIn() method:

https://www.w3schools.com/jquery/eff_fadein.asp

Answer 3

$(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.