이미지를 채우기 위해 배경에서 애니메이션으로 애니메이션하기

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는 비유적이고 그리고 내가 어떻게 CSS "속도"를 측정하는 XD

Answer 2

당신이 속성을 가진 개체를 전달할 수있는 여러 CSS 속성을 설정하려면 아무 생각이 없기 때문에, 헤아릴 수 없을 정도로 빠른 jQuery를보다

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