Question

当涉及到JS和CSS时，有点新手，并且已经尝试解决我的问题几天了，希望有人可以帮助我......

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

我已经在我的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请尝试以下操作：

加载一个fancybox实例....当你只需要其中任何一个（但不是两个）时，你正在加载normal和packed版本。

加载fancybox js文件 BEFORE 媒体，大拇指和按钮帮助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代码。

编辑：对于Fancybox 2.1，叠加层的speedIn选项似乎已被删除。它现在引入了叠加层的固定位置（也许这个新的区域与speedIn选项相冲突）

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

Fancybox 2.1覆盖淡入（speedIn）无法正常工作/凹凸不平

2 个答案: