jquery animate .css

Question

我有一个脚本:

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

我怎么能动画它或减慢它,所以它不会是瞬间的？

Answer 1

只需使用.animate()而不是.css()(持续时间,如果你想),像这样:

$('#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毫秒持续时间.

Answer 2

您可以选择纯CSS解决方案:

#hfont1 {
    transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out; /* FF 4 */
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
    -o-transition: color 1s ease-in-out; /* Opera */
}