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

全页JS和输入无限动画

1 个答案: