11

使用 JavaScript/jQuery 在悬停时循环颜色

我正在尝试获取一块文本，根据 HSL 0deg 和 360deg 之间的计算位置为每个字母着色，并在悬停时将颜色动画向右。我知道这很奇怪，但请耐心等待。我想要的是悬停时的动画彩虹文字。

我已经介绍了使所有这些都发生一次的逻辑，但无法使悬停循环行为起作用。

这是 codepen.io 的链接：http: //cdpn.io/txmlf

我尝试过使用 JavaScript 鼠标事件和 jQuery 的 .hover()。我最初的想法是在鼠标进入时设置一个间隔并在退出时将其清除。

对于这个显然非常重要的项目，我真的很感激任何帮助。

4

2 回答 2

17

您可能想考虑一下这将如何影响用户体验，但是这个：http: //jsfiddle.net/7Xuep/6/

好的，所以使用 CSS 动画旋转彩虹的所有颜色很容易。然后问题是将它们链接到所有跨度标签，以便动画在正确的位置开始。（即你需要绿色字母从绿色等开始它的动画。）为此，我们可以使用animation-delay：

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

我们可以使用它为每个字母以适当的颜色启动彩虹动画。通过使用linear计时功能，很容易确定动画将在什么时间到达每种颜色。因此，只需animation-delay为每个<span>元素附加正确的值即可。我通过获取您已经生成的 HTML 并将 CSS 规则添加到每个元素的style属性来做到这一点：

var animTime = 6, // time for the animation in seconds
    hueChange = 3, // the hue change from one span element to the next
    prefixes = ["", "-webkit-", "-moz-", "-o-"],
    numPrefixes = prefixes.length;

$('.unicorn').find('span').each(function (i) {
    for (var j = 0; j < numPrefixes; j++) {
        $(this).css(prefixes[j] + 'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
    }
});

但是您可以在生成所有span元素的同时执行此操作。那么这只是一个使用CSS设置动画的例子：

.unicorn:hover span {

    animation: colorRotate 6s linear 0s infinite;

}

@keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

所有这一切都让我们来到这里：http: //jsfiddle.net/P6WVg/7/

现在，如果您不想在有人不再悬停时重置颜色，.unicorn那么您可以使用animation-play-state：

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

但是，我发现 Chrome 在将初始值-webkit-animation-play-state:paused;和负值组合在一起时存在问题，-webkit-animation-delay以至于它只显示第一帧（即color: rgb(255,0,0);在这种情况下）。因此，我不得不使用事件监听器在第一次悬停时添加一个包含动画 CSS 的类，这导致我们：

http://jsfiddle.net/7Xuep/6/

（可以在此处跟踪 chrome 中的错误：https ://code.google.com/p/chromium/issues/detail?id=269340 ）

于 2013-10-06T19:10:41.550 回答
2

为什么不保持简单，（仅使用您的 HTML）这就是您所需要的：

现场演示

var step = 4, // colorChage step, use negative value to change direction
    ms   = 10,  // loop every
    $uni = $('.unicorn'),
    txt  = $uni.text(),
    len  = txt.length,
    lev  = 360/len,
    newCont = "",
    itv;
alert(lev+' '+len);

for(var i=0; i<len; i++)newCont += "<span style='color:hsla("+ i*lev +", 100%, 50%, 1)'>"+ txt.charAt(i) +"</span>";

$uni.html(newCont); // Replace with new content
var $ch = $uni.find('span'); // character

function stop(){ clearInterval(itv); }
function anim(){
  itv = setInterval(function(){
    $ch.each(function(){
      var h = +$(this).attr('style').split(',')[0].split('(')[1]-step % 360;
      $(this).attr({style:"color:hsla("+ h +", 100%, 50%, 1)"});
    });
  }, ms); 
}

$uni.hover(anim,stop);

在 FF、Chrome、Opera 中测试

于 2013-12-08T23:43:01.840 回答