How to only fade content once it is ready in Jquery?
- by Jared
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>
