0

我有一个几乎可以工作的功能。

它找到一个 .hex 类的元素，然后运行一个介于 5 到 13 之间的随机数，然后将这些 .hex 项附加到文档的正文中。

然后我有一个延迟，六边形慢慢地淡入淡出。

我想做的是在循环中创建它，以便它们不断淡入淡出。

我已经注释掉了我理解的应该起作用的代码，但目前没有。

我所做的只是将我的所有代码包装在一个名为 initHex() 的新函数中，然后在代码之后我使用 setInterval 每 12 秒运行一次函数（目前）。

我可以在控制台中看到该函数运行，然后开始非常快速地循环，数字急剧增加，并且很快它停止浏览器响应。

我想知道该函数是否包含过多的代码。

这个想法是希望当前函数在新函数淡入时仍在运行（六边形淡出）。

我假设在函数结束时我还需要一些东西来删除现有的十六进制元素，这样它们就不会继续添加到文档中。我确实试过这个。

这是功能：

 //function initHex() {

    $rndNum = Math.floor(Math.random() * 8) + 5;
    var e = $('.hex');
        for (var i = 0; i < $rndNum ; i++) {
        $docHeight = $(window).height();
        $docHeight = Math.random() * $docHeight * 2;
        $docWidth = $(window).width();
        $docWidth = Math.random() * $docWidth;
        $rndOpacity = Math.random();
        $rndSpeed = Math.floor(Math.random() * 2000) + 2000;
        e.each(function(){
            $(this).css({
                position:   'absolute',
                top:        $docHeight,
                left:       $docWidth - 195,
                opacity:    $rndOpacity
            });
            e.clone().prependTo('body').delay(e.length*800).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2);
            console.log($rndNum, $rndOpacity, $rndSpeed);
        });
    }
//}

 //setInterval(initHex, 12000);

在六边形运行后移除六边形方面，我尝试过：

 e.clone().prependTo('body').delay(e.length*800).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2.5, function(){
      e.remove();
 });

这是小提琴： http: //jsfiddle.net/lharby/j5bSz/ 把它叉到你的心里。

TIA

4

1 回答 1

1

I have reworked your code. You made a few mistakes and yes you have tried to clone the whole bunch of elements with class hex each time, but the array have no method clone.

Try this:

function initHex() {

    var $rndNum = Math.floor(Math.random() * 8) + 5;
    for (var i = 0; i < $rndNum ; i++) {
        var $docHeight = $(window).height()
          , $top = Math.random() * $docHeight * 2
          , $docWidth = $(window).width()
          , $left = Math.random() * $docWidth - 195
          , $rndOpacity = Math.random()
          , $rndSpeed = Math.floor(Math.random() * 2000) + 2000;
        $('<div></div>').addClass('hex').css({
            position:   'absolute',
            top:        $top,
            left:       $left,
            opacity:    $rndOpacity
        }).prependTo('body').delay(1000).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2, function(){
           this.remove();
        });
    }
}

setInterval(initHex, 12000);

One more thing, this code is still not optimized, but I have tried to save your code as much as possible to be more clear for you.

http://jsfiddle.net/andbas/DZSJT/1/

于 2013-10-30T11:33:24.360 回答