Question

我有一个创建fireworks的jquery动画。要使用它，你必须这样称呼：$（＆＃39; SELECTOR＆＃39;）。fireworks（）;

对于＆＃34; SELECTOR＆＃34;，我使用了html，因此它会在整个页面上制作烟花。现在问题是，当这个动画播放时我不能再点击任何东西了。我有一个标签，但由于动画正在运行，我无法点击它。

在动画运行时，是否有停止动画或单击按钮的方式？

Answer 1

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

将其关闭

您可以通过键入

来关闭此功能

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

或通过计时器自动

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

Answer 2

这将有助于

 $( document ).ready(function() {

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

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

Answer 3

查看源代码，这不仅仅是一个＆＃34; jquery动画＆＃34;。在您使用HTML作为选择器的整个html页面中，它实际上是绘制画布。如果您想点击某些内容，请将您的页面略微放松，而不是使用整个HTML。

要删除烟花，代码会公开一个名为destroy的函数，您可以使用timeout，click或任何您喜欢的内容删除烟花。

//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 = '';
}

您可以像这样调用它

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

如何在x秒后停止jquery动画

3 个答案: