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(true) 而不是 .stop()，动画将正确停止，并且您的页面运行良好。

事实上，当您移动鼠标时，会触发很多事件并触发很多动画。

一个当前正在运行，所有其他都存储在队列中，稍后执行（在第一个动画完成后）。

这样，框架就有了按时间顺序排列的事件列表的“记忆”。

通过使用 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 回答