1

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

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

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

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

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

4

2 回答 2

3

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

检查此链接并查看演示！

于 2013-05-04T11:26:54.687 回答
0

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

于 2013-05-04T11:15:43.253 回答