如何在图像上的鼠标悬停时暂停动画

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

}
});

Answer 1

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/

Answer 2

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>