1

私が取り組んでいるきちんとした小さな jQuery スクリプトがあります。

目標: オーバーフローが非表示の親 div は、画像を含むより大きな div を保持します。マウスを親divの左または右に移動すると、画像のあるdivがmargin-leftに変更され、左または右に移動します。

問題は...親divからマウスを移動すると（左または右）、画像が動き続けます。マウスが親divの左端または右端の内側にないときに画像を停止する必要があります。

何か案は？

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript">
            //<![CDATA[

              jQuery.noConflict ();

              jQuery(document).ready(function(){

                jQuery('#container').mousemove(function(e){
                  var parentWidth = jQuery('#container').width();
                  var parentWidthLeft = Math.round(.1 * jQuery('#container').width());
                  var parentWidthRight = Math.round(jQuery('#container').width() - parentWidthLeft);
                  var parentHeight = jQuery('#container').height();
                  var parentOffset = jQuery('#container').offset();
                  var X = Math.round(e.pageX - parentOffset.left);
                  var Y = Math.round(e.pageY - parentOffset.top);

                 if (X<parentWidthLeft)
                    {
                      jQuery('#image').animate({'left': '-' + parentWidth }, 5000);
                    }
                 if (X>parentWidthRight)
                    {
                      jQuery('#image').animate({'left': parentWidth }, 5000);
                    }
                 if (X<=parentWidthRight && X>=parentWidthLeft)
                    {
                      jQuery('#image').stop();
                    }
                 if (X<1)
                    {
                      jQuery('#image').stop();
                    }


                  });

                  jQuery('#container').mouseleave(function(){
                      jQuery('#image').stop();
                  });




              });

            // ]]>
        </script>

    </head>
    <body>

    <div id="container" style="width: 500px; height: 500px; overflow: hidden; border: 10px solid #000; position: relative; margin: auto auto;">
        <div id="image" style="position: absolute; left: 0; top: 0;"><img src="http://dump4free.com/imgdump/1/Carmen-Electra_1wallpaper1024x768.jpg" alt="" /></div>
    </div>

    </body>
    </html>
4

2 に答える 2

2

jQuery の stop() 関数は、「clearQueue」という名前のブール値パラメーターを持つことができます。.stop() の代わりに .stop(true) を使用しようとすると、アニメーションが正しく停止し、ページが適切に実行されます。

実際には、マウスを動かすと、多くのイベントが発生し、多くのアニメーションがトリガーされます。

1 つは現在実行中で、他のすべてはキューに格納され、後で実行されます (最初のアニメーションが終了した後)。

このように、フレームワークには、イベントの時系列リストの「メモリ」があります。

stop(true) を使用して、アニメーションのキューを完全にフラッシュするように指示します。

于 2012-09-28T03:54:49.390 に答える
0

jQuery .unbind()を使用してみてください:

jQuery('#container').mouseleave(function(){
                  jQuery('this').unbind('mousemove');
              });
于 2012-09-28T04:09:24.293 に答える