jQuery 放慢淡入淡出动画

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

正确，因为它是 "string"
if( "100" in jQuery.fx.speeds )

false, speeds only holds fast, slow, and _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() 函数以获取要使用的正确 settings/methods。

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 放慢淡入淡出动画

jQuery slowing down the fade animation

javascript

jquery

animation

jquery-animate