Javascript 颜色循环一些元素'；带有jQuery的css属性：hover被卡住且不稳定

在jQuery和的帮助下，我正在对一些元素的颜色、背景色和边框颜色css属性进行颜色循环

我正在这样做：

var currentColor = myRandNumber; // I get this variable from the main page
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d',
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ];

window.setInterval( animateColor, 2000 ); // not using requestAnimationFrame
                                          // for browser compatibility

function animateColor() {

    $(".new-project-header, .button a:active,
    #logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a,
    ul#menu-main-nav li.contact a:visited, .footer-twitter,
    .footer-mail").animate(
        {
            backgroundColor: myWebColors[currentColor]
        }, "slow");

    $("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover,
    h3.portfolio-item-title a:hover").animate(
        {
            color: myWebColors[currentColor]
        }, "slow");

    $("p a, p a:visited").animate(
        {
            borderColor: myWebColors[currentColor]
        }, "slow");

    if (currentColor == 9) { // the following cycles through the array
                             // in an endless loop
        currentColor = 0;
    } else {
        currentColor++;
    }
}

编辑：jsfiddle

我遇到的问题是，当我将鼠标悬停在

pa

上时，虽然jQuery的颜色循环做得很好，但一旦我将鼠标移出，链接将保持在：hover状态，使用它循环使用的最新颜色

当我将鼠标悬停在

ul#menu main nav li

上时，情况更糟。它将更改a:hover颜色，此时该颜色应仅应用于

ul#菜单主导航li。联系

。就像后一个选择器：悬停状态优先于前一个选择器的css

也许我应该在事件上手动执行

？也许我应该在每个循环步骤结束时“重置”所有非悬停状态？也许这一切都太过分了，我应该尝试另一种方法

谢谢
 当鼠标退出元素时，需要将状态更改回默认状态。即悬停完成

jqueryhover可以很容易地做到这一点

$( "a" ).hover(
  function() {
    $( this ).animate({  color: myWebColors[currentColor] }, "slow");
  }, function() {
        $( this ).animate({  color: default_color }, "slow");
  }
);

出于好奇，为什么不使用这里解释的CSS:hover属性？
当鼠标退出元素时，需要将状态更改回默认状态。即悬停完成

jqueryhover可以很容易地做到这一点

$( "a" ).hover(
  function() {
    $( this ).animate({  color: myWebColors[currentColor] }, "slow");
  }, function() {
        $( this ).animate({  color: default_color }, "slow");
  }
);

出于好奇，为什么不按照这里的解释使用CSS:hover属性呢？
首先，您有一个循环（
setInterval（）
），即使您没有悬停任何东西，它也在运行。这是无用的

因此，我使用
setTimeout（）
更新了您的。你可以从这样的事情开始。我还用事件处理程序替换了
：hover
语句。我不知道这对你是否合适。但我应该这样做。希望它能有所帮助。
首先，您有一个循环（
setInterval（）
），即使您没有悬停任何东西，它仍在运行。这是无用的

因此，我使用
setTimeout（）
更新了您的。你可以从这样的事情开始。我还用事件处理程序替换了
：hover
语句。我不知道这对你是否合适。但我应该这样做。希望能有所帮助。
你能提供HTML或a吗？刚刚用它更新了帖子，链接在大代码框的正下方。aaa和更新的JSFIDLE，以前忘记添加背景色循环代码。你能提供HTML或a吗？刚刚用它更新了帖子，链接在大代码框的正下方。aaa和更新的JSFIDLE，以前忘了添加背景色循环代码。我确实在我的普通css中使用：hover属性，以防出现任何错误/用户没有激活的js。但是这里我正在进行颜色循环（也就是说，你可以在你面前看到颜色的变化），所以我需要javascript。您提出的解决方案是我正在考虑使用的解决方案之一，但我想知道是否有更好/更干净的解决方案，或者我是否应该尝试不同的方法。谢谢我确实在我的普通css中使用了：hover属性，以防出现任何错误/用户没有激活的js。但是这里我正在进行颜色循环（也就是说，你可以在你面前看到颜色的变化），所以我需要javascript。您提出的解决方案是我正在考虑使用的解决方案之一，但我想知道是否有更好/更干净的解决方案，或者我是否应该尝试不同的方法。谢谢实际上，我希望颜色循环循环始终运行！所以它不是无用的，它是至关重要的：）我只是简单地修改：悬停状态，以保持一切与主颜色循环同步。不过，您是第二个对事件执行此操作的人，所以我可能会这样做。如果您想要随机颜色，只需在每次悬停链接时使用Math.floor（（Math.random（）*11））来定义起始颜色。然而，如果你有你一直在等待的；）只是好奇，你真的读过我的代码和帖子吗？我从定义的数组中获取颜色。问题在于css级联规则的纠结，这些规则是用jQuery干预的结果。但是，还有其他一些东西本可以对我进行优化。但你是对的。最初的问题只是关于css和jQuery。我很抱歉试图帮助你。事实上，我希望颜色循环一直运行！所以它不是无用的，它是至关重要的：）我只是简单地修改：悬停状态，以保持一切与主颜色循环同步。不过，您是第二个对事件执行此操作的人，所以我可能会这样做。如果您想要随机颜色，只需在每次悬停链接时使用Math.floor（（Math.random（）*11））来定义起始颜色。然而，如果你有你一直在等待的；）只是好奇，你真的读过我的代码和帖子吗？我从定义的数组中获取颜色。问题在于css级联规则的纠结，这些规则是用jQuery干预的结果。但是，还有其他一些东西本可以对我进行优化。但你是对的。最初的问题只是关于css和jQuery。我所有的朋友都为我的帮助道歉。