Question

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

              }
              </script>


              <script>

              $(document).ready(function() {

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


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


              });

              });



              </script>

Answer 1

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/