How to pause the animation on mouse hover on image

Question

Please I need help to stop the animation on mouse hover and to continue on mouse out. Please see the url below to view the code. thanks

http://jsfiddle.net/AbdiasSoftware/F8x4p/

        $(window).load(function(){
        var pos = $('#center').position(),
        radiusSat = $('#sat1').width() * 0.5,
        radius = $('#center').width() * 0.5,
        cx = pos.left + radius,
        cy = pos.top + radius,
        x, y, angle = 0, 
        angles = [],
        spc = 360 / 25,
        deg2rad = Math.PI / 180,
        i = 0;

    for(;i < 25; i++) {
        angles.push(angle);
        angle += spc;
    }

    /// space out radius
    radius += (radiusSat + 25);

    loop();

    function loop() {
    for(var i = 0; i < angles.length; i++) {

        angle = angles[i];

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});


    angles[i] += 0.1;
        if (angles[i] > 360) angles[i] = 0;
    }

    requestAnimationFrame(loop);

}
});

Related: https://stackoverflow.com/questions/10735922/how-to-stop-a-requestanimationframe-recursion-loop — Rory McCrossan, Dec 05 '17 at 09:48

score 2 · Answer 1 · answered Dec 05 '17 at 09:53

You could create a variable to keep track on whether the mouse is inside, and use events to change the variable.

Firstly, wrap your markup in a containing div so the event listener can easily be applied to all the elements:

<div class="container">
  <div id="center"></div>
  <div id="sat0"></div>
  <div id="sat1"></div>
  <div id="sat2"></div>
  <div id="sat3"></div>
  <div id="sat4"></div>
</div>

Then add a new variable, called mouseEntered, and set it to false.

Then create two event listeners - one to set the mouseEntered variable to true when the mouse enters the container, and one to set it to false when the mouse leaves.

document.querySelector('.container').addEventListener('mouseenter', function() {
    mouseEntered = true
})
document.querySelector('.container').addEventListener('mouseleave', function() {
    mouseEntered = false
})

Finally, wrap everything in your loop function, apart from requestAnimationFrame, in an if statement that checks if mouseEntered is false.

function loop() {
    if (mouseEntered === false) {
      for(var i = 0; i < angles.length; i++) {

          angle = angles[i];

          x = cx + radius * Math.cos(angle * deg2rad);
          y = cy + radius * Math.sin(angle * deg2rad);

          $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

          angles[i] = angles[i] + 1;
          if (angles[i] > 360) angles[i] = 0;
      }
    }

    requestAnimationFrame(loop);
}

Fiddle with the changes: http://jsfiddle.net/pbobbr5h/

score 0 · Answer 2 · answered Dec 05 '17 at 09:57

try this-

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 5; i++) {
    angles.push(angle);
    angle += spc;
}
stop();
/// space out radius
radius += (radiusSat + 10);
$("#center").mouseover(function(){
   start();
});
$("#center").mouseout(function(){
   stop();
});

var requestId;

function loop(time) {
    requestId = undefined;

   for(var i = 0; i < angles.length; i++) {

        angle = angles[i];
        
        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
    
        angles[i] = angles[i] + 1;
        if (angles[i] > 360) angles[i] = 0;
    }
    
    //requestAnimationFrame(loop);

    stop();
}

function stop() {
    if (!requestId) {
       requestId = window.requestAnimationFrame(loop);
    }
}

function start() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>

How to pause the animation on mouse hover on image

2 Answers2