jquery 动画背景 none

Question

我有一个悬停效果，可以为没有背景的元素的背景设置动画，动画在悬停时有效，但它不会返回到没有背景：

$('#home_sensors_products').hover(function(){
    $(this).animate({ 
        'background-color':'#fff',
        'color':'#3463a0'
    }, '2000');
    },function(){
    $(this).animate({ 
        'background-color':'none',
        'color':'#fff'
    }, '2000', 'linear');
});

如何将背景动画恢复为无背景？我已经尝试了 background:none 和透明，但都没有运气。

Answer 1

看起来 JQuery 本身不支持动画化为非数字属性值。您可以找到提到的限制 here in the JQuery API documentation.

文档确实提到了 JQuery.Color，这是一个有助于缓解此限制的插件。以下是您如何使用插件更新代码的想法：

$('#home_sensors_products').hover(function(){  
    $(this).animate({ 
        'background-color':'#fff',
        'color':'#3463a0'
    }, '2000');
    },function(){
    $(this).animate({ 
        // rgba(255,255,255,0) is a transparent white.  Good for transitioning from #FFF
        'background-color':'jQuery.Color(rgba(255,255,255,0))',
        'color':'#fff'
    }, '2000', 'linear');
});

您可以查看 this fiddle 以查看实际效果。

jquery 动画背景 none

jquery animate background to none

jquery

jquery-animate