jquery - 动画背景从图像到填充

Question

我有一个从黑色到透明渐变的菜单。当我将鼠标悬停在菜单上时，我想将其变成全黑填充。为什么以下不起作用？

$('#topmenu').hide().animate({
    'height': 'toggle'
    }, "slow").hover(function() {$(this).animate({ 'opacity' : 1 }).css( 'background' , 'rgb(0,0,0)', 'box-shadow' , "0px 5px 15px 0px rgba(0, 0, 0, 0.5)" );}, function() {$(this).animate({ 'opacity' : 0.6  }).css( 'background' , "url('<?php bloginfo('template_url'); ?>/images/topmenu_bg.png') repeat-x" );});

菜单的 bg 图像是通过具有“背景”属性的样式表设置的。

谢谢。

Answer 1

为什么不用这个纯 CSS？

#topmenu {
    background-image:linear-gradient(to bottom,black,transparent);
    background-color:transparent;
    transition:background-color 1s ease;
    /* vendor-specific alternatives follow */
    background-image:-webkit-linear-gradient(top,black,transparent);
    -webkit-transition:background-color 1s ease;
}
#topmenu:hover {
    background-color:black;
}

Plain CSS 比 jQuery 快得无法估量，无论是比喻还是字面上，因为我不知道如何衡量 CSS“速度”XD