jQuery animate背景颜色slideDown

Question

我想在悬停元素时为背景色设置动画。

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

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

有2个问题与此..对了slideDown心不是工作，红色刚刚进来..还当鼠标离开时，元件就完全dissapearing（我假设，因为淡出正在努力的元素本身而不是背景颜色的过渡）。

有没有任何教程或任何人可以帮助实现这一目标？

Answer 1

这是因为fadeOut是一个jQuery对象方法。它只适用于使用jQuery选择的DOM元素。 对您的问题最优雅的解决方案是使用CSS transitions。

这里是一个伪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类名中使用大写字母。

Answer 2

可以实现通过使背景图片，还使用.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}) 
    }) 

检查这个LINK和也看演示！