jQuery 动画文本颜色答案

【问题标题】：jQuery Animated Text ColorsjQuery 动画文本颜色
【发布时间】：2016-03-26 12:07:19
【问题描述】：

我正在尝试让每个字母颜色从红色变为绿色，然后再变为红色。

我现在的工作，但我不喜欢褪色，有没有更好的方法来做到这一点？

  const ltr = $('h1').text().split('');
  function colorChange() {
    $( 'h1' ).fadeOut(500, function() {
      redGreen();
    }).fadeIn(500).fadeOut(500, function() {
      greenRed();
    }).fadeIn(500);
  }

  setInterval( function() {
    colorChange();
  }, 1);

  function redGreen() {
    $('h1').text('');
    for(var i = 0; i < ltr.length; i++) {
      if(i % 2 == 0) {
        $('h1').append('<span class="red">' + ltr[i] + '</span>');
      } else {
        $('h1').append('<span class="green">' + ltr[i] + '</span>');
      }
    }
  }
  function greenRed() {
    $('h1').text('');
    for(var i = 0; i < ltr.length; i++) {
      if(i % 2 == 0) {
        $('h1').append('<span class="green">' + ltr[i] + '</span>');
      } else {
          $('h1').append('<span class="red">' + ltr[i] + '</span>');
      }
    }
  }

【问题讨论】：

为什么不通过“red”和“green”类选择元素，然后根据需要添加和删除备用类？

标签： javascript jquery

【解决方案1】：

参考这里切换类动画的解决方案：ToggleClass animate jQuery?。你应该把你的 colorChange 函数改成这样：

function colorChange() {
    $( 'h1 > span' ).toggleClass( "red green", 1000, "easeInOutQuad" );
}

并确保在开始时构建spans，并为每个项目提供替代类（仅第一次使用redGreen() 或greenRed() 函数之一）。

检查这个Fiddle

您需要包含jQuery UI 才能生效。

【讨论】：

【解决方案2】：

我设法通过使用setTimeout 消除了淡入淡出效果。

见plunker here

【讨论】：