jQuery 减慢淡入淡出动画

debugcn 发表于 Dev

乔丹·米格尔

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

帕特里克·埃文斯

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

因此，由于您传入的是 100: 的字符串版本"100"，jQuery 将最终执行以下操作（相关代码片段如下）

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

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

false，speeds 只包含 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 ),

速度（）函数

确定要使用的正确持续时间

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。