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

Question

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>

Can you show the relevant HTML so that we can give an accurate answer? — jessegavin, Mar 17 '10 at 18:30
I still don't see any images 'inside the div' that you are referring to. Are you talking about CSS background images? — jessegavin, Mar 17 '10 at 18:37

score 3 · Accepted Answer · answered Mar 17 '10 at 18:31

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.

answered Mar 17 '10 at 18:31

dclowd9901

6,756
9
44
63

Make sure you update the status of the question if an answer works out for you :) – dclowd9901 Mar 17 '10 at 18:49
I was hoping someone would offer a solution oriented around load() or ready() – Jared Mar 17 '10 at 18:58
There's a time and place for every function. In my experience, this isn't the kind of script that best utilizes the load() or ready() functionality. – dclowd9901 Mar 17 '10 at 19:02

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

The function

$(window).load()

is probably what you're looking for.

See: SO post

edited May 23 '17 at 12:18

Community

1
1

answered Mar 17 '10 at 18:29

Tom Tresansky

19,364
17
93
129

Yes, but I have multiple popups that this occurs with. window load() doesn't work after the initial page has loaded, and changes are being made. – Jared Mar 17 '10 at 18:33

score 0 · Answer 3 · answered Mar 17 '10 at 18:30

0

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

answered Mar 17 '10 at 18:30

heisenberg

9,665
1
30
38

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

3 Answers3