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

我设法使用setTimeout删除淡入淡出效果。

请参阅plunker here

Answer 2

这里提到了切换类动画的解决方案：ToggleClass animate jQuery?。您应该将colorChange函数更改为以下内容：

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

并确保在开头为span构建每个项目的替代类（仅首次使用redGreen()或greenRed()函数之一。）

选中此Fiddle

您需要加入jQuery UI才能生效。

jQuery动画文本颜色

2 个答案: