2016-03-22 1 views
0

Wie mache ich. Stop machen die Überschrift zu stoppen, wo ich klicke. und nicht aufgrund von Animation bewegen. nur mit Javascript. Ich brauche die Überschrift, um anzuhalten, wo ich klicke, aber ich muss auf die Überschrift klicken, um sie anzuhalten, damit ich nirgends klicken kann und die Überschrift dorthin bewegt wird, dann halte an, wenn ich klicke, wo die Überschrift steht.Wie bekomme ich .Stop zur Arbeit und stellen Sie sicher, dass die Überschrift stoppt, wenn ich klicke und nicht wo ich klicke

<!DOCTYPE html> 
<html> 

<head> 
    <title>Interactive programming</title> 
</head> 

<body> 
    <h1 id="heading" style="position:absolute;">Watch the moving heading!</h1> 
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script> 
    <script> 
    function move() { 
     $("h1").animate({ 
      "left": "+=200px" 
     }, "slow") 
     .animate({ 
      "top": "+=200px" 
     }, "slow") 
     .animate({ 
      "left": "-=200px" 
     }, "slow") 
     .animate({ 
      "top": "-=200px" 
     }, "slow", function() { 
      setInterval(move(),300) 
     }); 
    } 
    setInterval(move(),300) 
    //this should stop it 
    $("h1").click(function() { 
    $("h1").stop(); 
    }) 

    </script> 

    </body> 

</html> 

Antwort

0

Der 'setInterval' läuft weiter, so dass Sie nach 300 ms eine neue Animation starten, auch wenn Sie 'stop' aufrufen.

Die Lösung besteht darin, 'setInterval' auf eine Variable zu setzen, dann können Sie 'clearInterval' aufrufen.

  var interval = setInterval(move(),300); 
    }); 
} 
var setinterval = setInterval(move(),300); 

Jetzt können Sie können das Intervall stoppen:

$("h1").click(function() { 
    clearInterval(interval); 
    $('h1').stop(); 
} 
Verwandte Themen