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]); 
} 
});