jquery Fade In, Fade Out, Fade In 2

I'm done a bit of reading on here, but I'm posting because I can't seem to figure out specifically what I'm looking to do. I've tried tweaking existing code I've found here, but no such luck. It probably doesn't help that I'm not very well versed in javascript. I'm a recovering flash designer.

Let me explain:

I have 2 divs, one with a very large image, one with text. Ideally I'd like the webpage to function in this manner:

1. nothing on screen
2. fade in ima开发者_如何学JAVAge div (and I think it might need some time to load first)
3. fade out image div
4. nothing on screen (ie: not a crossfade)
5. fade in text div
6. leave the image div there permanently.

Any thoughts on how to approach this would be much appreciated! Again, forgive my ignorance.

---

Since the image could be large, wire up the .load() event on the image which will be fired once the image has loaded successfully. From there just use the callback function in the .fadeOut() and .fadeIn() to show/hide your divs.

$(function() {
    $(".image img").load(function() {
        $(".image").fadeIn("slow", function() {
            $(this).fadeOut("slow", function() {
                $(".text").fadeIn("slow");
            });
        });
    });
});

Code example on jsfiddle

---

$(document).ready(function(){

  $('#id-of-img').fadeIn(5000).delay(5000).fadeOut(5000); // 5000 is 5 seconds, change this as you wish
  $('#id-of-text').fadeIn(5000);

});

This requires jQuery 1.4.2 or above for the delay() function

-- edit --

Just re-read your question. You say "leave the image div there permanently', did you mean the text div? If so, what I've done should work, if not then I don't really know what you mean.

---

Using Event Callbacks

You want to load the image in a way that provides a callback when it has finished pre-loading:

var $textDiv = jQuery('.textDiv'); // contains the text

var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
    jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
        $(this).fadeOut(300, function() {
            $textDiv.fadeIn(300);
        }
    });

};