Continuously run function while on mouseenter- Jquery

How do I get the function to loop/continue as long as I'm on mouseenter? If I add colorPixels() after the duration in the first script, it doesn't stop on 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);

     开发者_JAVA百科         }
              </script>


              <script>

              $(document).ready(function() {

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


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


              });

              });



              </script>

How about this:

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;
    });

});

Example: http://jsfiddle.net/jfebC/

Or, using .stop() like you are doing currently:

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();
    });
});

Example: http://jsfiddle.net/TyybP/

You can have your pixelColors() animation restart itself from the completion function and thus it will run indefinitely until you call .stop() on mouseleave. And, you just make sure that it stops calling itself when the mouse is no longer hovering. There are several ways to do that. I chose to do it here, using a piece of state saved on the actual animation object using jQuery.data(). It could also be done with a global variable or a variable in a higher/shared scope.

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);
  }