Почему не срабатывает функция реплейс

232
19 декабря 2018, 23:30

Суть вот в чем. Есть скрипт который делает "снег" на странице. При попытке поменять итем скрипт ломается и не хочет работать.

собственно рабочий код. и библиотеки для его работы

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
$(document).ready(documentReady);
function documentReady()
{
    var MAX_SNOW        = 200;
    var MAX_SNOW_SIZE   = 7;
    var MAX_SNOW_SPEED  = 1;
    snowStart();
    function snowStart() {
        console.log("// Snow animation start");
        createSnows();
    }
    function createSnows() {
        var container = $("#snow-animation-container");
        for (var i = 0; i < MAX_SNOW; i++) {
            var appendItem  = getRandomItem(i);
            container.append(appendItem);
            var animateItem = $(".snow" + String(i));
            var randomTime  = Math.random() * MAX_SNOW_SPEED;
            goAnimate(animateItem, i, randomTime);
            goAnimate2(animateItem);
        };
    введите сюда код
        console.log("// Create snows");
    }
    function goAnimate(item, id, randomTime) {
        TweenMax.to(item, randomTime, {css:{marginTop:"+=100"}, ease:Linear.easeNone, onComplete:function() {
            var topPosition = item.css("margin-top").replace("px","");
            if (topPosition > $(window).height()) {
                changePosition(item);
                randomTime = Math.random() * MAX_SNOW_SPEED;
                goAnimate(item, id, randomTime);
            }
            else {
                goAnimate(item, id, randomTime);
            }
        }});
    }
    function goAnimate2(item) {
        var directionTime   = 1 + Math.floor( Math.random() * 5 );
        var randomDirection = 1 + Math.floor( Math.random() * 4 );
        var delayTime       = 1 + Math.floor( Math.random() * 3 );
        if (randomDirection == 1){
            TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
                TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
                    goAnimate2(item);
                }});
            }});
        }
        else if(randomDirection == 2)
        {
            TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
                TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
                    goAnimate2(item);
                }});
            }});
        }
        else if(randomDirection == 3)
        {
            TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
                goAnimate2(item);
            }});
        }
        else if(randomDirection == 4)
        {
            TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
                goAnimate2(item);
            }});
        }
    }
    function changePosition(item) {
        var _width  = Math.floor( Math.random() * MAX_SNOW_SIZE );
        var _height = _width;
        var _blur   = Math.floor( Math.random() * 2 );
        var _left   = Math.floor( Math.random() * ($(window).width() - _width) );
        var _top    = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
        item.css("width", _width);
        item.css("height", _height);
        item.css("margin-left", _left);
        item.css("margin-top", _top);
        item.css("-webkit-filter", "blur(" + String(_blur) + "px)");
        item.css("-moz-filter", "blur(" + String(_blur) + "px)");
        item.css("-o-filter", "blur(" + String(_blur) + "px)");
        item.css("-ms-filter", "blur(" + String(_blur) + "px)");
        item.css("filter", "blur(" + String(_blur) + "px)");
    }
    function getRandomItem(id) {
        var _width  = Math.floor( Math.random() * MAX_SNOW_SIZE );
        var _height = _width;
        var _blur   = Math.floor( Math.random() * 2 );
        var _left   = Math.floor( Math.random() * ($(window).width() - _width) );
        var _top    = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
        var _id     = id;
        return getSmallSnow(_width, _height, _blur, _left, _top, _id);
    }
    function getSmallSnow(width, height, blur, left, top, id) {
        var item = "<div class='snow" + id + "' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px; border-radius: 50%; background-color: white; -webkit-filter: blur(" + blur +"px); -moz-filter: blur(" + blur + "px); -o-filter: blur(" + blur + "px); -ms-filter: blur(" + blur + "px); filter: blur(" + blur + "px);'></div>"
        return item;
    }

}

но как только я меняю итем весь скрипт перестает работать. Итем img или с бекграундом.

Текст ошибки. Uncaught TypeError: Cannot read property 'replace' of undefined at f.onComplete итем который я хочу поставить

var item2= "<img class='fall fallen" + "src="+'img/layers/1.png'+"' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px;/>"
READ ALSO
Почему форма не отправляет данные

Почему форма не отправляет данные

Всплывает окно сохранения пароля, но ни в отладчике фаерфокса, ни в адресной строке ничего не меняется

220
Где хранить данные VSIX?

Где хранить данные VSIX?

Есть у меня VSIX-расширение, которое в процессе работы может генерировать файлы с пользовательским контентом

196
Как в wpf передать выделенный в ListBox item в TextBox

Как в wpf передать выделенный в ListBox item в TextBox

Всем здравствуйте, Есть у меня приложение на wpf, на форме есть ListBox, если в нем я выделил строку, то как мне эту строку автоматически заставить...

272
Устройство видео потока. ffmpeg

Устройство видео потока. ffmpeg

Я формирую видео поток с помощью ffmpeg и отправляю по сетиПринимаю и воспроизвожу видео на другой стороне с помощью ffplay

162