How to only fade content once it is ready in Jquery?

Question

Hello,

I've seen examples for load() and ready(), but they always seem to apply to the window or document body, or a div or img or something like that.

I have a hover() function, and when you hover over it, it uses fadeIn() to reveal it. Problem is, the images inside the div aren't loaded yet, so it ends up just appearing anyway. I need code that will only allow the image to fade when it's contents are fully loaded. When I just plug in other selectors like the following, it doesn't work

$(this).next(".menuPopup").ready(function () { //or load(), neither work
  fadeTo(300, 1);
});

EDIT: Relevant code

     $( '.leftMenuProductButton' ).hover (
            function () {

                                $(this).next(".menuPopup").stop().css("opacity", 1).fadeIn('slow');


            },
            function () {



                $(this).next(".menuPopup").stop().hide();


    });

HTML

<div class="leftMenuProductButton"> Product 1</div>
                                <div id="raceramps56" class="menuPopup"><IMG SRC="myimage.jpeg"> </div>

Answer 1

The function

$(window).load()

is probably what you're looking for.

See: SO post

Answer 2

You could use window.onLoad, that doesn't fire until everything is loaded.

Answer 3

You should probably go with chaining the animations:

$(this).next(".menuPopup").fadeIn(300, function() {
    $(this).children('.inside_image').css(
        'opacity':'0',
        'display':'show'
    );
    $(this).children('.inside_image').animate({
        opacity: '1'
    }, 300);
});

I've done something like this before, and it worked pretty well. I think a lot of Lightboxes do this.