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图像通过样式表设置，属性为“background”。

谢谢。

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

动画背景从图像填充

2 个答案: