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

Question

People asked similar questions before, but mine is with a twist:

I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:

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

As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.

What would be the best way to fade in the content div after Supersized image finihsed fading in?

Would be grateful for your help!

Answer 1

If anyone is still looking for a solution, here's what I did:

Supersized.3.2.7.js

Right after the img.load function, within the base._start function, I added the following:

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

Answer 2

Found my own answer:

the solution is to edit the supersized core js file. In the file, after this bit of code:

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

I added my own line:

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

Worked like magic!

Answer 3

Have you tried using the jQuery .ready() function?

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

});