优化javascript代码，多个动画调用

Question

我希望优化代码并解决问题，但是我不知道该怎么做。

这是我的html：

<div id="page">
    <div id="intermed">
          <div id="section-presentation"></div>
          <div id="section-lasalle"></div>
    </div>
</div>
<div id="console1" style="position:fixed; top:50px; left:50px; color:#F0F; z-index:10000;"></div>
<div id="console2" style="position:fixed; top:100px; left:50px; color:#F0F; z-index:10000;"></div>

我的JavaScript：

function isVisible( row, container, padding ){
    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = container.scrollTop() - padding,
        containerHeight = container.height();

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}

$(window).scroll(function(){
    Element.prototype.getElementById = function(id) {
        return document.getElementById(id);
    }

    // Détection section-presentation
    var section = '#section-presentation';
    var selector = section.replace('#', '');
    var target = document.getElementById('page').getElementById(selector);

    if (isVisible(target, $(window), 0)){
        var lineMaker = new LineMaker({
            parent: {element: section, position: 'append'},
            position: 'fixed',
            lines: [
                {top: 0, left: '6%', width: 20, height: '10vh', color: '#abc837', hidden: true, animation: { duration: 2000, easing: 'easeInOutSine', delay: 100, direction: 'TopBottom' }},
                {top: 0, left: '7.1%', width: 10, height: '10vh', color: '#447821', hidden: true, animation: { duration: 2000, easing: 'easeInOutQuad', delay: 80, direction: 'TopBottom' }},
            ]
        });
        lineMaker.animateLineIn(0);
        lineMaker.animateLineIn(1);
        document.getElementById('console1').innerHTML = section+" visible";
    } else {
       document.getElementById('console1').innerHTML = section+" invisible";
       lineMaker.animateLinesOut();
       lineMaker.animateLineOut(0);
       lineMaker.animateLineOut(1);
    };

    // Détection section-lasalle
    var section = '#section-lasalle';
    var selector = section.replace('#', '');
    var target = document.getElementById('page').getElementById(selector);

    if (isVisible(target, $(window), 0)){
        var lineMaker = new LineMaker({
            parent: {element: section, position: 'append'},
            position: 'fixed',
            lines: [
                {top: 0, left: '6%', width: 20, height: '10vh', color: '#abc837', hidden: true, animation: { duration: 2000, easing: 'easeInOutSine', delay: 100, direction: 'TopBottom' }},
                {top: 0, left: '7.1%', width: 10, height: '10vh', color: '#447821', hidden: true, animation: { duration: 2000, easing: 'easeInOutQuad', delay: 80, direction: 'TopBottom' }},
            ]
        });
        lineMaker.animateLineIn(0);
        lineMaker.animateLineIn(1);
        document.getElementById('console2').innerHTML = section+" visible";
    } else {
        document.getElementById('console2').innerHTML = section+" invisible";
        lineMaker.animateLinesOut();
        lineMaker.animateLineOut(0);
        lineMaker.animateLineOut(1);
    };
});

我的目标是在显示div时有一条动画线（来自LineMaker：https://tympanus.net/Development/LineMaker/），但在不显示div时将其删除。

可见/不可见部分还可以，但是我要优化LineMaker部分，因为我在最终项目中有4个不同的div。

最后一点是，我想使用该函数来回绕线动画，但是由于它需要var LineMaker，因此使用“ lineMaker.animateLinesOut（）;”进行调试。或“ lineMaker.animateLineOut（0）;”

您可以进行检查=> https://jsfiddle.net/Lqykmahx/