views:

59

answers:

3

Hi all! I'm pretty a beginner with jQuery!

I need to have some divs to fadeIn on page loads, and i can do it. I need to have them showing with different delay and times, and i can do it. Every div has an image that fadeIn when you hover the relative div, and i can do it.

The problem is that the animation of the image on hover, start still if the fadeIn of the div is not ended.

I want that if the user hover the div that is still going with fadeIn nothing happens. If you hover a div that is totally show then the image starts the fadeIn.

Here is my HTML

<div id="immagine1">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>
<div id="immagine2">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>

Here is my jQuery

$(window).load(function () {

$('#immagine1').hide();
$('#immagine1').stop().fadeIn(1000);
$('#immagine2').hide();
$('#immagine2').stop().delay(2500).fadeIn(2500);
$('div').hover(
        function(){ $(this).find('img').fadeIn(1000);
    });

     });

And the img css

img{
display:none;
}

How can i "disable" the hover effect till the end of the fadeIn on page load?

thanks!

This is the link of a test page http://tinyurl.com/32thnx7

A: 

Look, i doesn't understand your real problem, but try this:

$(window).load(function () {
    $('#immagine1, #immagine2').hide();
    $('#immagine1').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
    );
    $('#immagine2').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
   );
});

Or take a look on jQuery hover docs

André Gadonski
thanks for your reply but your code seems to not work at all. I've set online a test page so you can see what i need.If you reload the page staying with the mouse away from the box and then you go hover the box, you'll see appear a "brown" box.If you reload the page staying with the mouse on the box position, you'll see that the "brown" box start showing before the div (black or white) ends its fade In.I want that the user can start the hover effect only when the div finish is fadeIn. Hope now is clearer.
MarcoDL
A: 

I'm not sure what you're trying to achieve, but maybe you can get your desired effect by using .queue() to explicitly place the hover animation at the end of the queue:

$('div').hover(function() {
  $(this).queue(function() {
    $(this).find('img').fadeIn(1000);
  });
});​

The fade-in effect will begin after pending animations in the default queue ("fx") are complete. Here's a fiddle demonstrating the concept; perhaps it will point you in the right direction.

Ken Redler
I think that you have understand what i need to achive.Your code isn't working either, it seems with a syntax error but i can't figure out why.Here is a test page link of the test http://tinyurl.com/32thnx7
MarcoDL
Your tinyurl link points to a page that has your original code -- not the queue() approach.
Ken Redler
i know, i can't make it work with your code. thanks anyway :)
MarcoDL
A: 

I believe that this will do what you are looking for. Basically, what you need to do is wait until the <div> has faded in completely before you bind the hover event for the image. You can achieve this by doing the event binding in the callback for the <div> fadeIn. Additionally, since you are only doing something on the hoverIn event (and not on hoverOut), you can use .mouseenter() instead of .hover()

Here is the code:

$(function() {
    $('div img').hide();
    $('#immagine1').hide().fadeIn(5000, function() {
        $('div').mouseenter(function() {
            $(this).find('img').fadeIn('1000');
        });
    });
});

And here's a working demo of it: http://jsfiddle.net/vYz3t/

Ender
Thanks!!! It is exactly what i needed!! Really thanks :)
MarcoDL
Just glad I could help :)
Ender