Fullpage JSと入力無限アニメーション

Question

私はFullpage JSを使用していますが、特定のセクションで無限のアニメーションを有効にしようとしています。

HTML

<div id="fullpage"> 
<div class="section">Some section</div> 
<div class="section"> 
    <input type="text" class="form-animate-input"> 
</div> 
<div class="section">Some section</div> 
<div class="section">Some section</div> 

JS

$(document).ready(function(enabled) { 
$('#fullpage').fullpage({ 
    onLeave: function (index, nextIndex, direction) { 
    if (nextIndex == 2) { 
     animateForm(true); 
    } else { 
     animateForm(false); 
    } 
    } 
}); 

var timeOut; 
var index; 
var delay = 70; 

function animateForm() { 
    text1 = 'Text to animate'; 
    index = 0; 
    $('.form-animate-input').val(''); 
    clearTimeout(timeOut); 

    if (!enabled) { 
    return false; 
    } 

    while (index < text1.length) { 
    timeOut = setTimeout(appendLetter, index * delay, text1, index); 
    index++; 
    } 
    setTimeout(animateForm, timeOut + text1.length * delay + 3000, true); 
} 

function appendLetter(text1, index) { 
    $('.form-animate-input').val($('.form-animate-input').val() + text1[index]); 
} 

}）。

問題は、このセクションを終了して戻ってくると、問題をマージするという問題がありますか？

Working JSFIDDLE

Answer 1

あなたは、個々の文字のアニメーションを設定し、タイムアウトではなくanimateFormを再起動し、タイムアウトをクリアしてきました。

私はまた、スライドを入れたり離したりするときに別々の機能に分かれています。

JS

$(document).ready(function(enabled) { 
$('#fullpage').fullpage({ 
    onLeave: function (index, nextIndex, direction) { 
    if (nextIndex == 2) { 
     startAnimation(); 
    } 
    if (index == 2) { 
     stopAnimation(); 
    } 
    } 
}); 

var timeOut1; 
var timeOut2; 
var index; 
var delay = 70; 

function stopAnimation() { 
    clearTimeout(timeOut1); 
    clearTimeout(timeOut2); 
} 

function startAnimation() { 
    $('.form-animate-input').val(''); 
    text1 = 'Text to animate'; 
    index = 0; 
    while (index < text1.length) { 
    timeOut1 = setTimeout(appendLetter, index * delay, text1, index); 
    index++; 
    } 
    timeOut2 = setTimeout(startAnimation, timeOut1 + text1.length * delay + 3000, true); 
} 

function appendLetter(text1, index) { 
    $('.form-animate-input').val($('.form-animate-input').val() + text1[index]); 
} 
});