jQuery文本顏色變化動畫

今天我一直在ra my我的頭，試圖獲得一個mouseover文本顏色變化腳本，它改變了字符串的第一個字母，然後是每個字母后的動畫。jQuery文本顏色變化動畫

如此有效地創造了幾乎變化的彩色幻燈片？我希望你明白我的意思。

我真的很困惑，最終得到了我想要的動畫字符串，將字符串轉換爲數組，然後使用帶有超時設置的循環將數組中的每個元素更改爲新的顏色。

但我的邏輯是遍佈整個地方im肯定和事情只是不工作！

有人可能請給我看看或提供一個解決方案！感謝

http://jsfiddle.net/OwenMelbz/qTbzq/

來源

2012-03-17 Owen

所以，每個字母都應該在鼠標懸停之間有3秒變黃？ – 2012-03-17 18:14:25

鼠標懸停應該觸發顏色變化順序是，並且順序是將每個字母變成黃色，之間有短暫的延遲，我設置了3秒作爲測試 – Owen 2012-03-17 18:18:14

好的，所以你需要一種「級聯」屏幕上的黃色字母，對嗎？ – 2012-03-17 18:18:51

怎麼是這樣的：jsFiddle example。

的jQuery：

var string = $('h2').text(); 
var letters = string.split(''); 
var x = string.length; 
$('h2').text(''); 
$.each(letters, function(index) { 
    $('h2').append('<span id="e' + index + '" class="normal">' + letters[index] + '</span>'); 

}); 
function Animate(elem) { 
    setTimeout(function() { 
     $('#e'+elem).animate({ 
      'color': 'yellow' 
     }, 500, function(){elem++;Animate(elem)}); 
    }, 50); 
} 
$('h2').mouseenter(function() { 
    Animate('0'); 
}).mouseleave(function() {});

HTML：

<h2>OWEN MELBOURNE</h2>

來源

2012-03-17 18:45:46 j08691

唯一的問題（我幾乎不會說它是一個問題）是，你的代碼試圖在單詞之間着色腳趾空間（並且顯然失敗），導致突出N和M之間明顯的失誤話。 – 2012-03-17 18:49:11

@ElliotBonneville - 如果這是OP的問題，可以很容易地更改。 – j08691 2012-03-17 18:50:58

的確如此。 +1 – 2012-03-17 18:53:32

我花了一輩子，但試試這個：http://jsfiddle.net/mQ2UV/3/

$(function() { 
    var h2 = $('h2'); 
    var letters = h2.text().split(''); 
    var n = letters.length; 

    h2.html(''); 

    for (var i = 0; i < n; i++) { 
     h2.append("<span class='normal' id='l" + i + "'>" + letters[i] + "</span>"); 
    } 

    var attached = false; 

    $('h2').mouseover(function() { 
     if (attached) { 
      return; 
     } 
     attached = true; 

     var n = 1; 

     $("span").each(function() { 
      var t = this; 
      setTimeout(function() { 
       $(t).removeClass("normal").addClass("yellow"); 
      }, 100 * n); 
      n++; 
     }); 

    }); 
});

來源

2012-03-17 18:45:14

啊非常感謝！是的，我不知道如何看起來如此簡單的事情會花費很多努力！非常感謝您的幫助，它確實可以爲您服務！：D – Owen 2012-03-17 18:55:08

很高興幫助！我無法使用'setTimeout'來延遲。我想這就是我在幾個月內沒有使用JavaScript的原因。 – 2012-03-17 18:57:46

使用jQuery事件的變化（）方法在下面的鏈接，請參閱顏色更改文本腳本..免費腳本可用。

http://www.hscripts.com/scripts/jquery/color-changing-text.php

來源

2013-12-25 13:24:19 KArthik

請注意，[只提供鏈接的答案]（http://meta.stackoverflow.com/tags/link-only-answers/info），所以答案應該是搜索解決方案的終點（vs.而另一個引用的中途停留時間往往會隨着時間推移而過時）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra 2013-12-25 13:27:58

jQuery文本顏色變化動畫

回答

相關問題