4

jQueryアニメーションの繰り返しに問題があり、stop（）に関する従来のアドバイスは役に立たないようです。

画像があります。ユーザーが画像の上にマウスを置くと、白い透明なオーバーレイが右からスライドして入ります。ユーザーがマウスを外すと、消えてほしいです。

私が持っているコードは部分的に機能しますが、ユーザーが画像の左側（つまり、オーバーレイから離れた場所）でマウスを出し入れした場合に限ります。オーバーレイが表示されているときにユーザーがオーバーレイの上にマウスを置くと、それはmouseoutイベントとしてカウントされ、アニメーションがトリガーされるように見えますが、これは私が望んでいることではありません。これが発生すると、アニメーションが繰り返され始めます。

HTML：

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

CSS：

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

jQuery：

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

どんな助けでも大歓迎です。

4

1 に答える 1

4

問題は、画像自体にマウスオーバーイベントを適用していることだと思います。そのため、divが画像に重なると、画像の上にマウスを置く必要がなくなり、画像が消えてから再び戻ります。

あなたがする必要があるのは、これらの両方のdivをコンテナdivに入れてから、それにマウスイベントを適用することです。

すなわち

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

と：

$('#container').hover(...);
于 2012-08-06T14:18:39.300 に答える