jquery animate .css [英] jquery animate .css

问题描述

我有一个脚本：

$('#hfont1').hover(
    function() {
        $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
    }, 
    function() {
        $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
    }
);

我如何设置动画或降低速度，所以它不会是即时的？

how can i animate it or slow it down, so it wont be instant ?

推荐答案

只需使用 .animate（） 而不是 。 css（） （如果你愿意，有持续时间），如下所示：

Just use .animate() instead of .css() (with a duration if you want), like this:

$('#hfont1').hover(function() {
    $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
    $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});

您可以在此处测试。但请注意，您需要 jQuery颜色插件或 jQuery UI 以设置颜色动画。在上面，持续时间是1000毫秒，您可以更改它，或者只是将其关闭默认的400毫秒持续时间。

You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

这篇关于jquery animate .css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！