javascript - jQuery 动画背景颜色 slideDown

Question

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

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

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

这有两个问题.. SlideDown 不工作，红色刚进来.. 鼠标离开时，元素也完全消失(我假设是因为 fadeOut 正在元素本身而不是元​​素上工作背景颜色的过渡)。

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

Answer 1

您可以通过将其设为背景图像来实现相同的效果，还可以使用 .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并查看演示!