jQuery animation keeps repeating

Refresh

November 2018

Views

399 time

4

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.

1 answers

4

Я думаю, что проблема вы подаете мыши над событием к самому изображению, поэтому, когда ДИВ перекрывает изображение, вы больше не мыши над изображением, и снова гаснет, а затем обратно в

Что вам нужно сделать, это положить обе эти дивы в контейнере DIV, а затем применить событие мыши на что

т.е.

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

а также:

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