jquery动画/mouseover/mouseout不工作

当我将鼠标悬停在具有“spring”类的元素上时，我希望它转换为另一种颜色。我正在使用jQuery进行此操作，但似乎无法使其正常工作。有人能帮我解释一下吗？这是我到目前为止所拥有的一把小提琴

提前谢谢

$('.spring').mouseover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    }).mouseout(function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

---

这是我到目前为止为jQuery编写的代码

尝试使用

悬停

进行此操作：

$('.spring').hover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    });
}, function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

---

我已经修改了你的小提琴

如果仍然需要mouseover和mouseout事件，那么可以使用下面的代码段。 $（文档）.ready（函数（）{

此外，您还需要Jquery UI来设置backgroundColor属性的动画

---

如果有帮助，请将其标记为答案。

如果我理解正确，您希望框变为红色，直到有人悬停，然后在悬停时变为灰色，然后变为黑色而不是红色

我更喜欢让CSS做尽可能多的工作，因为它通常处理速度更快，更容易使用，特别是对于如此简单的东西。CSS动画在大多数情况下可以取代jQuery动画功能。jQuery只需要设置一个标志，表明框已悬停，然后就不需要了

jQuery:

我为鼠标盖使用了更新的“开”功能，这样你就可以在不需要的时候轻松地关闭它。这基本上是在框第一次悬停时设置一个类

$(document).ready(function () {

    $('.spring').on('mouseover', function () {
        $('.spring')
         .addClass('touched')
         .off('mouseover');
    });

});

CSS:

我发现动画比jqueryanimate更平滑，可以通过CSS转换进行更精细的控制。我们将悬停状态设置为灰色，将.hover类设置为黑色，CSS中的所有内容都在那里

.spring {
    background: red;
    width: 100px;
    height: 30px;
    transition: background 0.5s ease
}
.spring:hover, .spring.touched:hover {
    background: #ccc;
}
.spring.touched {
    background: #000;
}

这使您可以轻松控制外观的各个方面，而无需将繁琐的css代码添加到jQuery中

只有一个问题在使用它之前，请检查表中的CSS动画支持：

---

我通常认为转换是“好的”。项目，而不是基本的，所以我不太担心IE9和以下版本不会看到转换。它们仍然可以很好地进行颜色更改，因此没有丢失任何功能。javascript中没有所有垃圾的优点是值得的。

另一方面，小提琴没有包含jQuery…你的JSFIDLE有错误，他说re是一个更新的（还没有做你想做的事情）我更新了fiddle来做你想做的事，看看我的回答你提出了一个关于过渡的引人注目的观点，我完全理解。我想做过渡，并排除为IE8和以下所有一起开发！但是，因为这个网站是为一所仍然使用IE8的小学，它教孩子们关于se的差异ASON及其行为方式。在IE8（该死的学校和他们的IE8）中，一切都必须完美运行，这是完全可以理解的。这就是为什么我在最后提出警告。看起来可能有一个可行的过渡方案，但坚持使用jQuery也是有意义的。

 $('.spring').mouseover(function () {
        $('.spring').animate({
            'backgroundColor': '#CCCCCC'
        })
    })
.mouseout(
    function () {
        $('.spring').animate({
            'backgroundColor': '#000000'
        });
    });
});

$(document).ready(function () {

    $('.spring').on('mouseover', function () {
        $('.spring')
         .addClass('touched')
         .off('mouseover');
    });

});

.spring {
    background: red;
    width: 100px;
    height: 30px;
    transition: background 0.5s ease
}
.spring:hover, .spring.touched:hover {
    background: #ccc;
}
.spring.touched {
    background: #000;
}