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文本颜色变化动画

回答

相关问题