Question

当我将一个'spring'类悬停在元素上时，我希望它转换为另一种颜色。我正在使用jQuery这样做，但我似乎无法让它工作。有人能够为我阐明这一点吗？这是我到目前为止的小提琴......

提前致谢！

$('.spring').mouseover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    }).mouseout(function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

这是我到目前为止jQuery的代码！

Answer 1

尝试使用hover：

$('.spring').hover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    });
}, function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

Answer 2

$(document).ready(function () {
    $('.spring').hover(function () {
        $('.spring').animate($(this).css({
            'background': '#CCCCCC'
        }));
    }, function () {
        $('.spring').animate($(this).css({
            'background': '#000000'
        }));
    });
});

http://jsfiddle.net/3f4RQ/5/

Answer 3

我修改了你的小提琴

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function () {

    $('.spring').hover(function () {
        $('.spring').animate({
            'backgroundColor': '#CCCCCC'
        })
    },

    function () {
        $('.spring').animate({
            'backgroundColor': '#000000'
        });
    });
});

如果您仍需要mouseover和mouseout事件，则可以使用以下代码段。 $（document）.ready（function（）{

 $('.spring').mouseover(function () {
        $('.spring').animate({
            'backgroundColor': '#CCCCCC'
        })
    })
.mouseout(
    function () {
        $('.spring').animate({
            'backgroundColor': '#000000'
        });
    });
});

此外，您还需要Jquery UI来设置backgroundColor属性的动画。

如果有帮助，请标记为答案。

Answer 4

如果我理解正确，你希望盒子是红色的，直到有人盘旋，然后在悬停时变灰，然后变成黑色而不是红色。

我更喜欢让CSS尽可能多地完成工作，因为它经常处理得更快，更容易使用，特别是对于这么简单的事情。在大多数情况下，CSS动画可以替换jQuery动画功能。 jQuery只需要设置一个标记该框已经悬停，然后在那之后就不需要了。

<强> jQuery的：

我使用更新的“on”功能进行鼠标悬停，因此您可以在不需要时轻松将其关闭。这基本上是在第一次徘徊时在盒子上设置一个类。

$(document).ready(function () {

    $('.spring').on('mouseover', function () {
        $('.spring')
         .addClass('touched')
         .off('mouseover');
    });

});

<强> CSS：

我发现动画更平滑，可以通过CSS过渡而不是jQuery动画更精细地控制。我们将悬停状态设置为灰色，将.hovered类设置为黑色，并且CSS中的所有内容都正确。

.spring {
    background: red;
    width: 100px;
    height: 30px;
    transition: background 0.5s ease
}
.spring:hover, .spring.touched:hover {
    background: #ccc;
}
.spring.touched {
    background: #000;
}

这使您可以轻松控制外观的各个方面，而无需在jQuery中添加繁琐的css代码。

See the Fiddle here

在使用它之前只有一个问题，请检查表格中的CSS动画支持： http://caniuse.com/css-animation。我通常认为转换是一个“很好有”的项目而不是必需项，所以我不太担心IE9及以下版本不会看到转换。他们仍然可以很好地获得颜色变化，因此实际上没有功能丢失。没有javascript中所有垃圾的优点是值得的。

jquery animate / mouseover / mouseout无效

4 个答案: