Wie höre ich eine Jquery-Animation nach x Sekunden

Question

Ich habe eine Jquery-Animation, die fireworks erstellt. Um es zu benutzen, muss man es so nennen: $ ('SELECTOR') .fireworks();

Für "SELECTOR" habe ich HTML verwendet, so dass es Feuerwerk auf der ganzen Seite macht. Jetzt ist das Problem, ich kann nichts mehr klicken, wenn diese Animation abgespielt wird. Ich habe ein a-Tag, kann aber nicht darauf klicken, weil die Animation läuft.

Gibt es trotzdem eine Möglichkeit, die Animation zu stoppen oder eine Möglichkeit für mich, auf die Schaltfläche zu klicken, wenn die Animation läuft?

Answer 1

$('SELECTOR').fireworks('destroy'); 

wird deaktivieren

Sie diese drehen können, indem Sie

<button onclick="TurnFireworksOff">Try it</button> 
function TurnFireworksOff() 
{ 
$('SELECTOR').fireworks('destroy'); 
} 

oder automatisch über Timer von

setTimeout(TurnFireworksOff, 3000) 
function TurnFireworksOff() 
{ 
$('SELECTOR').fireworks('destroy'); 
} 

Answer 2

über einen Button aus

Dies wird dazu beitragen,

$(document).ready(function() { 

      // Start Fireworks 
      $('SELECTOR').fireworks(); 

      //Stop Fireworks after x milliseconds. 
      x = 5000; 
      setTimeout(function() {$('SELECTOR').fireworks();}, x); 
}); 

Answer 3

Mit Blick auf den Quellcode ist dies mehr als eine "Jquery-Animation". Es ist buchstäblich eine Leinwand über, in Ihrem Fall seit Sie die HTML als Selektor, Ihre gesamte HTML-Seite verwendet. Wenn Sie auf etwas klicken möchten, lassen Sie ein wenig von Ihrer Seite unbrennbar, anstatt den gesamten HTML-Code zu verwenden.

Um die Feuerwerkskörper zu entfernen, stellt der Code eine Funktion namens "destroy" zur Verfügung, mit der Sie das Feuerwerk mit einem timeout, einem click oder was auch immer Sie möchten, entfernen können.

//taken from fireworks.js source 
'destroy': function(element) { 
    var jqe = $(element); 

    // Check this element isn't already inited 
    if (jqe.data('fireworks_data') === undefined) { 
     console.log('Looks like this element is not yet inited!'); 
     return; 
    } 
    var data = jqe.data('fireworks_data'); 
    jqe.removeData('fireworks_data'); 

    // Stop the interval 
    clearInterval(data.interval); 

    // Remove the canvas 
    data.canvas.remove(); 

    // Reset the elements positioning 
    data.element.style.position = ''; 
} 

Sie können es aufrufen wie diese

$('SELECTOR').fireworks('destroy')