CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
JordanMiguel
JordanMiguel

Reputation: 740

jQuery slowing down the fade animation

I'm using pagify.js for a one page site. As a default there is an instant fade out / fade in when I click to a different page, here's the code: 

$('#page_holder').pagify({
      pages: ['about', 'directory', 'archive','contribute'],
      animationOut: 'fadeOut',
      animationOutSpeed: '100',
      animation: 'fadeIn',
      animationSpeed: '100',
      'default': 'about',
      cache: true 
    });

This is great but it's too fast, ideally when I click to a different page I want the both the fadeOut / fadeIn to be executed at much slower speeds.

I've tried to apply fast, slow as well as various milliseconds to the animations but nothing seems to be changing.

Upvotes: 0

Views: 326

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42736

Pagify.js uses jQuery's own animation functions. jQuery uses actual numbers for it's animate duration values. The only string values allowed are 'fast' and 'slow', and these will be used to look up actual predefined numbers. Any other string will result in a default value being used. Technically "_default" could be used as well, but no sense in actually using it since it will default to that anyway.

So since you are passing in the string version of 100: "100", jQuery is going to end up doing the following (relevant code snippets below)

  1. if( typeof "100" !== "number" )

    true, because it's "string"

  2. if( "100" in jQuery.fx.speeds )

    false, speeds only holds fast, slow, and _default

  3. opt.duration = jQuery.fx.speeds._default;

    set the default duration.

Fix: use actual numbers instead of string versions of them.

jQuery's predefined speeds

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L691

jQuery.fx.speeds = {
  slow: 600,
  fast: 200,

  // Default speed
  _default: 400
};

jQuery's animate function

calls the speed() function to get the proper settings/methods to be used.

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L514

animate: function( prop, speed, easing, callback ) {
  var empty = jQuery.isEmptyObject( prop ),
      optall = jQuery.speed( speed, easing, callback ),

speed() function

determining the correct duration to use

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L472

if ( typeof opt.duration !== "number" ) {
  if ( opt.duration in jQuery.fx.speeds ) {
      opt.duration = jQuery.fx.speeds[ opt.duration ];

  } else {
      opt.duration = jQuery.fx.speeds._default;
  }
}

Upvotes: 0

wilsonhobbs
wilsonhobbs

Reputation: 951

Have you tried setting animationSpeed to a number instead of a string? Like 100 instead of '100'

Upvotes: 1

Related Questions