Stop Animation nach Bildschirmaktivität

Question

Ich habe den Code gesetzt, um die Animation nach 2 Sekunden Bildschirm Inaktivität zu starten (ich mache im Grunde einen Bildschirmschoner). Aber ich kann nicht herausfinden, wie die Animation zu stoppen und die div wieder normal, nachdem der Bildschirm ist nicht mehr im Leerlauf (Maus bewegen, Bildschirm tippen, usw.)

Hier ist der JSFiddle - http://jsfiddle.net/Xw29r/7129/

My-Code :

var timeoutID; 

function setup() { 
this.addEventListener("mousemove", resetTimer, false); 
this.addEventListener("mousedown", resetTimer, false); 
this.addEventListener("keypress", resetTimer, false); 
this.addEventListener("DOMMouseScroll", resetTimer, false); 
this.addEventListener("mousewheel", resetTimer, false); 
this.addEventListener("touchmove", resetTimer, false); 
this.addEventListener("MSPointerMove", resetTimer, false); 

startTimer(); 
} 
setup(); 

function startTimer() { 
// wait 2 seconds before calling goInactive 
timeoutID = window.setTimeout(goInactive, 2000); 
} 

function resetTimer(e) { 
window.clearTimeout(timeoutID); 

goActive(); 
} 

function goInactive() { 
$(document).ready(function(){ 
animateDiv(); 

}); 

function makeNewPosition(){ 

// Get viewport dimensions (remove the dimension of the div) 
var h = $('#wrap').height() - 50; 
var w = $('#wrap').width() - 50; 

var nh = Math.floor(Math.random() * h); 
var nw = Math.floor(Math.random() * w); 

return [nh,nw];  

} 

function animateDiv(){ 
var newq = makeNewPosition(); 
var oldq = $('.a').offset(); 
var speed = calcSpeed([oldq.top, oldq.left], newq); 

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){ 
    animateDiv();   
}); 

}; 

function calcSpeed(prev, next) { 

var x = Math.abs(prev[1] - next[1]); 
var y = Math.abs(prev[0] - next[0]); 

var greatest = x > y ? x : y; 

var speedModifier = 0.1; 

var speed = Math.ceil(greatest/speedModifier); 

return speed; 

} 
} 
function goActive() { 
startTimer(); 
} 

Answer 1

Dort gehen Sie. Das Hinzufügen zusätzlicher Variablen hat den Trick gemacht.

bearbeiten

Box geht weiter aktiv zu starten zurück.

var timeoutID; 
 
var isActive = true; 
 
function setup() { 
 
    this.addEventListener("mousemove", resetTimer, false); 
 
    this.addEventListener("mousedown", resetTimer, false); 
 
    this.addEventListener("keypress", resetTimer, false); 
 
    this.addEventListener("DOMMouseScroll", resetTimer, false); 
 
    this.addEventListener("mousewheel", resetTimer, false); 
 
    this.addEventListener("touchmove", resetTimer, false); 
 
    this.addEventListener("MSPointerMove", resetTimer, false); 
 

 
    startTimer(); 
 
} 
 
setup(); 
 

 
function startTimer() { 
 
    // wait 2 seconds before calling goInactive 
 
    timeoutID = window.setTimeout(goInactive, 2000); 
 
} 
 

 
function resetTimer(e) { 
 
    window.clearTimeout(timeoutID); 
 

 
    goActive(); 
 
} 
 

 
function goInactive() { 
 
    $(document).ready(function() { 
 
    animateDiv(); 
 
    isActive = false; 
 
    }); 
 

 
    function makeNewPosition() { 
 

 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $('#wrap').height() - 50; 
 
    var w = $('#wrap').width() - 50; 
 

 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 

 
    return [nh, nw]; 
 

 
    } 
 

 
    function animateDiv() { 
 
    var newq = makeNewPosition(); 
 
    var oldq = $('.a').offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 

 
    $('.a').animate({ 
 
     top: newq[0], 
 
     left: newq[1] 
 
    }, speed, function() { 
 
    \t if(!isActive) 
 
     \t animateDiv(); 
 
    }); 
 

 
    }; 
 

 
    function calcSpeed(prev, next) { 
 

 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 

 
    var greatest = x > y ? x : y; 
 

 
    var speedModifier = 0.1; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
    } 
 
} 
 

 
function goActive() { 
 
    startTimer(); 
 
    isActive = true; 
 
    $('.a').stop(); 
 
    $('.a').css('top', 8); 
 
    $('.a').css('left', 8); 
 
}

#wrap { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-color: #9ff; 
 
} 
 

 
div.a { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div class='a'></div> 
 
</div>