Question

人们之前曾问过类似的问题，但是我的问题有所改变：

我正在使用Supersized jQuery插件来加载单个全屏背景图像。加载图像的代码是：

<script type="text/javascript">  

            jQuery(document).ready(function($) {

                $.supersized({
                    //Background image
                    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
                });

$('#content').delay(3500).fadeIn(600);

            });


        </script>

正如您在代码中看到的，我在“超大”函数之后链接了fadeIn效果。我想在背景图像（bg.jpg）之后淡入#content div，不仅仅是完成加载而且还完成淡入。我使用了我不太喜欢的解决方案：在我的淡入效果之前设置一个长延迟。

在超级图像完成淡入后，淡出内容div的最佳方法是什么？

非常感谢你的帮助！

Answer 1

如果有人还在寻找解决方案，那就是我所做的：

Supersized.3.2.7.js

在 img.load 函数之后，在 base._start 函数中，我添加了以下内容：

img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });

Answer 2

找到我自己的答案：

解决方案是编辑超大核心js文件。在文件中，在这段代码之后：

$('#supersized-loader').hide();     //Hide loading animation
element.fadeIn('fast');         //Fade in background
resizenow();

我添加了自己的一行：

$('#content').delay('fast').fadeIn('fast');

像魔术一样工作！

Answer 3

您是否尝试过使用jQuery .ready()功能？

jQuery(document).ready(function($) {
  $.supersized({
    //Background image
    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
  });

  $.supersized.ready( function() {
    $('#content').fadeIn(600);
  });

});

延迟jQuery动画，直到Supersized插件显示背景图像

3 个答案: