javascript - 使简单的 js fiddle 动画在按钮单击而不是页面加载时开始。

Question

我发现这个相当酷的 Js fiddle 并且一直在编辑动画并且认为它可以在当前元素中使用。但是我不是 Javascript 的最佳人选。要完成我的其余目标，我真正需要知道的是如何让动画在您单击按钮之前不启动。

这是 js fiddle 的动画。

http://jsfiddle.net/apipkin/qUTwQ/

这是CSS。

#o { 
    width: 200px; 
    height: 400px; 
    position: relative; 
    border-bottom: 1px solid blue;}

  .bubble { 
    border: 1px solid 
    #f40009; display: block; 
    position: absolute; 
    border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    }

剩下的在 JS fiddle 中。

感谢您的帮助!

Answer 1

您可以简单地将它包装在一个函数中并在点击时调用该函数。

DEMO

创建一个按钮:

<button id="btn">Click</button>

还有这个 js:

document.getElementById('btn').addEventListener('click', startAnimation);
function startAnimation() {
YUI().use('node', 'anim', 'anim-node-plugin', function(Y) {

    var o = Y.one('#o'),
        oW = o.get('offsetWidth'),
        oH = o.get('offsetHeight'),
        max = 12,
        min = 4,
        bubbles = 20,
        timerDelay = 4000;


    function makeBubble() {
        var b = Y.Node.create('<span class="bubble"></span>');

        b.plug(Y.Plugin.NodeFX, {
            duration: 7,
            easing: Y.Easing.easeOut,
            to: {
                top: 0,
                opacity: 0
            },
            on: {
                end: function() {
                    Y.later(10000, this, function(){
                    animBubble(this.get('node'));
                    });
                }
            }
        });

        o.append(b);
        animBubble(b);
    }

    function animBubble(b) {
        var v = Math.floor(Math.random() * (max - min)) + min;

        b.setStyles({
            height: v + 'px',
            width: v + 'px',
            borderRadius: v + 'px',
            top: (oH + 2) + 'px',
            opacity: 1
        });

        b.setStyle('left', Math.floor(Math.random() * (oW - v)));

        b.fx.set('duration', Math.floor(Math.random() * 2 + 3));
        b.fx.set('to.top', Math.floor(Math.random() * (oH / 2)));


        b.fx.run();
    }

    for (i = 0; i < bubbles; i++) {
        Y.later(Math.random() * timerDelay, this, function() {
            makeBubble();
        });
    }

});
}