jQuery动画背景颜色滑动

jQuery animate Background Color slideDown

本文关键字：颜色 背景 动画 jQuery      更新时间：2023-09-26

我正在尝试在元素悬停时将背景颜色动画化。

例如，假设我有一个div，当我悬停时，我想让它的背景变成红色，并向下滑动，在鼠标离开时淡出。

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

有两个问题…SlideDown不工作了，红色就进来了…同样在鼠标离开时，元素完全消失(我假设是因为淡出作用于元素本身，而不是背景颜色的过渡)。

有任何教程或任何人可以帮助实现这一点，请?

您可以通过使其成为背景图像来实现相同的效果，也可以使用。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})
    })

检查这个链接，也可以看到演示!

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

下面是一个包含您的需求的伪css代码片段:

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类名中使用大写字母。

相关文章：