Fancybox 2.1 覆盖淡入（speedIn）无法正常工作/颠簸

Question

对 JS 和 CSS 有点新手，这几天一直在尝试解决我的问题，希望有人能帮助我...

我刚刚从 Fancybox 2.0.5 更新到 2.1.0。当 iframe 打开以显示来自 Vimeo 的视频时，设置为淡入（speedIn 为 1000）的叠加层以 100% 进入而不是淡入。就在 iframe 完成加载之前，叠加层会短暂闪烁关闭并再次打开。通过助手，我可以控制 speedOut、不透明度和颜色，但不能控制叠加层的 speedIn。

我已经在我的 mac 上的 Safari (v5.1.2) 和 Firefox (v12) 中尝试过，并且都遇到了同样的问题。这是我正在开发的网站的链接。 （点击图片）：

http://www.steinstie.com/Test/index.html

任何想法将不胜感激！

这是帮助程序的代码：

$(document).ready(function() {
        $(".fancybox-iframe").fancybox({
            openEffect  : 'fade',
            closeEffect : 'fade',
            openSpeed   : 1000,
            closeSpeed  : 1000,
            padding     : 0,
            width       : 600,
            height      : 360,
            type        : 'iframe',
            autoSize    : false,
            fitToView   : false,
            // NICK H
            afterLoad: function(){
                  this.title = $(this.element).next('.newTitle').html();
            },
            // END NICK H
            helpers: {
            overlay: {
                    speedIn: 1000, //<-- here you control the overlay speedIn
                    speedOut: 1000,//<-- here you control the overlay speedOut
                    css: {'background' : 'rgba(0, 0, 0, 0.6)'}
                    }, // overlay

                title : {
                    type : 'inside'
                }

                    } // helpers
        });
    });

Answer 1

不幸的是，似乎没有 beforeOpen / afterOpen 与 beforeClose / afterClose 对应的回调（请参阅http://fancyapps.com/fancybox/ 的文档），但我们可以克隆叠加层创建函数并在叠加层之后添加自定义淡入已创建：

// Alter fancyBox functions.
(function ($, F) {

  // Clone of original overlay creation function, but with overlay fade in animation.
  F.helpers.overlay.create = function(opts) {
    var parent;

    opts = $.extend({}, this.defaults, opts);

    if (this.overlay) {
      this.close();
    }

    parent = F.coming ? F.coming.parent : opts.parent;

    this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.lenth ? parent : 'body' );
    this.fixed   = false;

    if (opts.fixed && F.defaults.fixed) {
      this.overlay.addClass('fancybox-overlay-fixed');

      this.fixed = true;
    }

    // Custom fade in.
    this.overlay.stop(true).hide().fadeIn();
  }

}(jQuery, jQuery.fancybox));

请注意，在解锁模式下使用叠加层时，这可能效果最好。当使用锁定模式（非触摸设备的默认设置）时，.fancybox-wrap 元素被放置在覆盖元素内，这可能导致双重淡入淡出动画（取决于您的动画设置）：在覆盖层和子包装元素上。

Answer 2

您的自定义脚本看起来不错...I have answered that before 所以试试这些：

1. 加载一个 fancybox 实例 .... 您现在正在加载 normal 和 packed 版本，而您只需要其中一个（但不是两个）。

   李>

2. 加载fancybox js文件之前媒体、拇指和按钮助手js文件，否则你会得到这些js错误：

   Timestamp: 12/09/2012 10:25:58 AM
   Error: TypeError: F is undefined
   Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-buttons.js
   Line: 25
   

和

Timestamp: 12/09/2012 10:25:58 AM
Error: TypeError: F is undefined
Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-thumbs.js
Line: 28

和

Timestamp: 12/09/2012 10:25:58 AM
Error: TypeError: F is undefined
Source File: http://www.steinstie.com/Test/source/helpers/jquery.fancybox-media.js
Line: 87

这些错误可能会破坏您的幻想代码。

编辑：对于 Fancybox 2.1，覆盖层的 speedIn 选项似乎已被删除。现在引入了覆盖的固定位置（可能这个新属性与speedIn 选项冲突）

发布的脚本 (overlay speedIn) 将适用于 fancybox 2.0.6 及更低版本。