javascript - jQuery 动画文本颜色

Question

我正在尝试让每个字母的颜色从红色交换到绿色，然后再交换回红色。

我现在可以使用，但我不喜欢褪色，有更好的方法吗？

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

Answer 1

这里引用了切换类动画的解决方案:ToggleClass animate jQuery? 。您应该将 colorChange 函数更改为如下所示:

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

并确保在开始时使用每个项目的替代类构建 span(使用 redGreen() 或 greenRed() 仅限第一次使用)。

检查这个Fiddle

You need to include jQuery UI to have the effect.