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

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

• javascript
• jquery
• fadein
• jquery-easing

Share Improve this question Follow edited Oct 31, 2017 at 8:42 Maistrenko Vitalii 1,01211 gold badge1010 silver badges1616 bronze badges asked Oct 31, 2017 at 6:49 meezmeez 4,8261010 gold badges5555 silver badges123123 bronze badges 1

• Have you tried .fadeIn({duration:50,easing:"swing"})? – fdomn-m Commented Oct 31, 2017 at 7:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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./jquery/eff_fadein.asp

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