Javascript jQuery动画背景色向下滑动

我试图在悬停元素时设置背景色的动画

例如，假设我有一个div，当我悬停时，我希望背景变成红色，向下滑动，然后在鼠标离开时淡出

$('div.Item').hover(function () {
  $(this).css('background-color', 'red').slideDown(400);
},
function () {
    $(this).css('background-color', 'transparent').fadeOut(400);
});

这有两个问题。。滑动下降不起作用，红色刚进来。。同样在鼠标左键上，元素完全消失（我假设是因为淡出作用于元素本身，而不是背景色的过渡）

---

是否有任何教程或任何人可以帮助实现这一点？这是因为fadeOut是一种jQuery对象方法。它只适用于使用jQuery选择的DOM元素。 解决您的问题最优雅的方法是使用CSS

这是一个伪css snipet，包含您的要求：

div.Item
{
    background-color: #your-background-color;
    -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
div.Item:hover
{
    background-color: #your-new-background-color; 
}

---

始终尝试编写尽可能少的代码。在css类名中避免使用大写字母。

您可以通过将其设置为背景图像来实现相同的效果，也可以使用.animate将css和动画效果一起更改，而不是保持链接，此代码将有助于：

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    })

---

检查这个，看看演示了

.slideDown

应用于您的元素，而不是背景色是的，我知道，如何在背景色上实现这一点？这就是我正在将渐变应用于背景色的问题？？？你的意思是/期望是什么？类似这样：…将放大镜项目悬停在菜单中，它具有向下滑动的效果。你能找到解决此问题的方法吗？这将使背景颜色褪色，它需要是一个图像才能像他的示例链接中那样滑动。这是最接近的答案，但我的问题是我想要一个动态颜色，允许用户更改它，而不是固定图像。@Kelish有一种方法，但我认为这不是语义上的，也不是一种聪明的移动，你可以在你的div下面有另一个div-在这种情况下，你必须将其背景设置为透明-当用户悬停在所需的div上时，你可以设置它的动画，类似这样的

$（“#nav a”）.mouseover（function（）{$（#backDiv）.animate（{top:'150px'}，2000）}）.mouseout（function（）{$（#backDiv）.animate（{top:'0px'}，2000）}）