Question

我正在使用pagify.js作为单页网站。默认情况下，当我点击其他页面时会立即淡出/淡入，这是代码：

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

这很棒，但速度太快，理想情况下，当我点击其他页面时，我希望fadeOut / fadeIn以更慢的速度执行。

我尝试将fast，slow以及不同的毫秒应用于动画，但似乎没有任何变化。

Answer 1

您是否尝试将animationSpeed设置为数字而不是字符串？与100代替'100'

一样

Answer 2

Pagify.js使用jQuery自己的动画功能。 jQuery使用实际数字作为它的动画持续时间值。允许的唯一字符串值为'fast'和'slow'，这些字符串值将用于查找实际预定义的数字。任何其他字符串都将导致使用默认值。技术上"_default"也可以使用，但实际使用它没有任何意义，因为它无论如何都会默认使用它。

因此，由于您传递的字符串版本为100："100"，jQuery最终会执行以下操作（下面的相关代码段）

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

是的，因为它是＆＃34;字符串＆＃34;
if( "100" in jQuery.fx.speeds )

false，速度只能保持快速，慢速和_default
opt.duration = jQuery.fx.speeds._default;

设置默认持续时间。

修复：使用实际数字而不是字符串版本。

jQuery的预定义速度

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L691
jQuery.fx.speeds = {
  slow: 600,
  fast: 200,

  // Default speed
  _default: 400
};

jQuery的动画功能

调用speed（）函数以获取要使用的正确设置/方法。

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（）函数

确定使用的正确持续时间

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

jQuery减慢了淡入淡出的动画

2 个答案: