Question

我有一个悬停效果，动画了没有背景的元素的背景，动画在悬停时工作，但它不会回到没有背景：

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

如何将背景设置为无背景动画？我尝试过背景：没有透明，也没有运气。

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动画背景为无

1 个答案: