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" );});

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

谢谢你。

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;
}

简单的 CSS 比 jQuery 快得多，无论是形象上还是字面上，因为我不知道如何衡量 CSS“速度”XD

Answer 2

要设置多个 css 属性，您必须传递具有属性的对象

$('#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");});