Question

只要我在mouseenter上，如何让函数循环/继续？如果我在第一个脚本中的持续时间之后添加colorPixels（），它不会在mouseleave上停止。

                  <script type="text/javascript">
              function pixelColors(){
              var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
              $('#logo_back').animate({
                           backgroundColor:color
                        }, 2000);

              }
              </script>


              <script>

              $(document).ready(function() {

              $("#logo").bind('mouseenter', function() {
              pixelColors() } );


              $("#logo").bind('mouseleave', function() {
              jQuery(this).stop(true, true);


              });

              });



              </script>

Answer 1

这个怎么样：

var mouseOver = false;
function pixelColors() {
    if (mouseOver) {
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
    $('#logo_back').animate({
        backgroundColor: color
    }, 2000, pixelColors);
    }
}

$(document).ready(function() {

    $("#logo").bind('mouseenter', function() {
        mouseOver = true;
        pixelColors();
    });


    $("#logo").bind('mouseleave', function() {
        mouseOver = false;
    });

});

示例： http://jsfiddle.net/jfebC/

或者，正如您目前所做的那样使用.stop()：

function pixelColors() {
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
    $('#logo_back').animate({
        backgroundColor: color
    }, 2000, pixelColors);
}

$(document).ready(function() {

    $("#logo").bind('mouseenter', pixelColors);

    $("#logo").bind('mouseleave', function() {
        $("#logo_back").stop();
    });
});

示例： http://jsfiddle.net/TyybP/

Answer 2

您可以从完成功能重新启动pixelColors()动画，因此它会无限期地运行，直到您在.stop()上致电mouseleave。而且，您只需确保当鼠标不再悬停时它就会停止调用。有几种方法可以做到这一点。我选择在这里使用jQuery.data（）使用保存在实际动画对象上的一段状态来完成它。它也可以使用全局变量或更高/共享范围内的变量来完成。

function pixelColors() {
    var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
    $('#logo_back').animate({
        backgroundColor:color
    }, 2000, function() {
         if ($('#logo_back').data("mouseenter")) {
             pixelColors()  // call it again, if mouse still over
         }
    });
}

$("#logo").bind('mouseenter', function() {
     $('#logo_back').data("mouseenter", true);  // set state of mouse hover
     pixelColors() } );


  $("#logo").bind('mouseleave', function() {
     $('#logo_back').data("mouseenter", false);  // clear state of mouse hover
      jQuery(this).stop(true, true);
  }

在mouseenter-Jquery上连续运行函数

2 个答案: