jQuery减慢淡入淡出动画答案

【问题标题】：jQuery slowing down the fade animationjQuery减慢淡入淡出动画
【发布时间】：2017-07-12 09:58:55
【问题描述】：

我将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 以及各种毫秒应用于动画，但似乎没有任何变化。

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案1】：

您是否尝试过将 animationSpeed 设置为数字而不是字符串？喜欢100 而不是'100'

【讨论】：

谢谢，效果很好...如何在“淡出”和“淡入”之间添加“延迟”？
粗略浏览一下文档表明这目前是不可能的。你可以在这里提出问题：github.com/cmpolis/Pagify

【解决方案2】：

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

所以既然你传入的字符串版本是 100："100"，jQuery 最终会执行以下操作（相关代码如下 sn-ps）

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

是的，因为它是“字符串”
if( "100" in jQuery.fx.speeds )

false，速度只有 fast、slow 和 _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;
  }
}

【讨论】：