動畫從圖像中填充背景

我有一個黑色到透明漸變的菜單。當我將菜單懸停時，我想將它變成完全黑色的填充。爲什麼不是以下工作？動畫從圖像中填充背景

$('#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'。

謝謝。

來源

2013-02-17 Niccolò Mineo

語法錯誤'} .css' – Musa 2013-02-17 23:48:07

固定:)但是box-shadow屬性仍然不能應用？ – 2013-02-18 10:51:15

爲什麼不是這個普通的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

來源

2013-02-18 00:13:55

向後兼容？ – 2013-02-18 11:10:39

適用於IE7。淡入淡出效果適用於所有最新版本的瀏覽器，但由於它是眼睛和非必要功能，因此兼容性不再重要。 – 2013-02-18 15:00:35

要設置多個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");});

來源

2013-02-18 12:24:39 Musa

動畫從圖像中填充背景

回答

相關問題