CODEWITHSUNDEEP
javascriptjqueryfadeinjquery-easing
meez
meez

Reputation: 4769

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

Upvotes: 2

Views: 8541

Answers (3)

Vincent1989
Vincent1989

Reputation: 1657

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

Upvotes: 0

Sagar Arora
Sagar Arora

Reputation: 1773

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

Upvotes: 0

nipunasudha
nipunasudha

Reputation: 2607

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

Upvotes: 3

Related Questions