CODEWITHSUNDEEP
jqueryfunctionmouseevent
AAAndreAAA
AAAndreAAA

Reputation: 137

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

              }
              </script>


              <script>

              $(document).ready(function() {

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


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


              });

              });



              </script>

Upvotes: 1

Views: 1721

Answers (2)

jfriend00
jfriend00

Reputation: 707716

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

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

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/

Upvotes: 1

Related Questions