CODEWITHSUNDEEP
jqueryjquery-animate
anaximander
anaximander

Reputation: 197

jQuery animation keeps repeating

I'm having trouble with a repeating jQuery animation, and the conventional advise about stop() doesn't seem to be helping.

I have an image. When a user mouses over the image, I'd like a white, transparent overlay to slide in from the right. When the user mouses out, I'd like it to go away.

The code I have partially works, but only if the user mouses in and out on the left side of the image (i.e., away from the overlay). If the user mouses over the overlay while it displays, that seems to count as a mouseout event and triggers the animation, which isn't what I want. Once this happens, the animation starts repeating.

The HTML:

<img src="Crowded_bookshelf.png" height="367" width="367" id="theImage">
<div id="overlay1"></div>

The CSS:

    #theImage { 
    border-radius: 184px;
 }
 #overlay1 {
    height:400px;
    width:240px;
    background-color:white;
    opacity:0.9;
    position:absolute;
    left:400px;
    top:60px;
 }

The jQuery:

        $('#theImage').hover(
        function() {
            $('#overlay1').animate(
                {   
                    left: '190px'
                }, 
                1000
            );
        },
        function() {
            $('#overlay1').animate(
                {
                    left: '400px'
                }, 
                1000
            );
        }
    );

Any help would be greatly appreciated.

Upvotes: 4

Views: 472

Answers (1)

Chris
Chris

Reputation: 27384

I think the problem is you are applying the mouse over event to the image itself, so when the div overlays the image, you no longer have your mouse over the image, and it goes out, then back in again

What you need to do is put both these divs in a container div, then apply the mouse event to that

i.e.

<div id="container">
    <img src="Crowded_bookshelf.png" height="367" width="367" id="theImage">
    <div id="overlay1"></div>
</div>

and:

$('#container').hover(...);

Upvotes: 4

Related Questions