Code wird nicht ausgeführt. clearInterval bewegen Überschrift in einem Quadrat

Question

Ich versuche, die Überschrift in einem Quadrat zu bewegen und es so zu machen, dass, wenn ich auf die Überschrift klicke, die Bewegung aufhört. Alles nur mit Javascript und JQuery. Im Moment zeigt die Überschrift, aber es bewegt sich überhaupt nicht. wenn jemand weiß, wie das funktioniert, bitte helfen.

<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1> 

function move() { 
    $("h1").animate({ 
     "left": "+=200px" 
    }, "slow").animate({ 
     "top": "+=200px" 
    }, "slow").animate({ 
     "left": "-=200px" 
    }, "slow").animate({ 
     "top": "-=200px" 
    }, "slow", function() { 
     var interval = setInterval(move(), 300); 
     interval 
    }); 
} 

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

//this should stop it 
$("h1").click(function() { 
    clearInterval(interval); 
    $('h1').stop(); 
} 

Answer 1

Eigentlich gibt es ein paar Dinge falsch. Ich werde in ein kleines Detail über sie gehen, aber in der Zwischenzeit ist hier der richtige Code:

function move() { 
    $("h1").animate({ 
     "left": "+=200px" 
    }, "slow").animate({ 
     "top": "+=200px" 
    }, "slow").animate({ 
     "left": "-=200px" 
    }, "slow").animate({ 
     "top": "-=200px" 
    }); 
} 

var interval = setInterval(move, 300); 

//this should stop it 
$("h1").click(function() { 
    clearInterval(interval); 
    $(this).stop(true, true); 
}); 

DEMO

So:

1) Global deklarieren Ihre interval Variable. Es funktioniert nicht, wenn Sie es in einer Funktion deklarieren, weil andere Funktionen dann nicht darauf zugreifen können. Aber das macht nichts wegen 2).

2) Entfernen Sie die setInterval von der move Funktion.

3) Führen Sie in einem Verweis auf move zu setInterval, tun es nicht nennen: setInterval(move, 300);

4) Achten Sie auf Ihr schließenden Klammern und Klammern.

5) .stop muss seine clearQueue Eigenschaft auf true eingestellt werden, sonst wird nur die letzte Animation in der Warteschlange gestoppt, und Sie haben viele.

Answer 2

Das Problem (abgesehen von den nicht übereinstimmenden Klammern) ist, weil Ihr setInterval() Aufruf die Animationen in der Warteschlange stapelt, daher bis zum tatsächlichen Löschen der Warteschlange mehrere tausend animate() Anrufe sind in der Warteschlange und abgeschlossen.

können Sie Ihre Logik ändern, so dass es keine Notwendigkeit, einen Timer überhaupt durch rekursiv move() Aufruf zu verwenden ist und eine Flagge auf den h1 auf Klick Einstellung, die die Animation nach der nächsten Schleife zu stoppen. Versuchen Sie folgendes:

function move() { 
    $("h1").animate({ 
     "left": "+=200px" 
    }, "slow").animate({ 
     "top": "+=200px" 
    }, "slow").animate({ 
     "left": "-=200px" 
    }, "slow").animate({ 
     "top": "-=200px" 
    }, "slow", function() { 
     !$(this).data('stop') && move(); 
    }); 
} 

move(); 

$("h1").click(function() { 
    $(this).data('stop', true); 
}); 

Working example

Bei Bedarf könnten Sie dieses Muster verwenden, das Klicken der h1 eine Umschaltfunktion auf der Animation zu machen:

$("h1").click(function() { 
    var stop = $(this).data('stop'); 
    if (stop) 
     move(); 

    $(this).data('stop', !stop); 
}); 

Working example