jquery在懸停的背景顏色屬性中褪色？

我有一小塊不工作的代碼，我們來看一看：jquery在懸停的背景顏色屬性中褪色？

$(document).ready(function() { 
    $('ul#mainmenu li:hover').css({backgroundColor:''}); 
    $('ul#mainmenu li').hover(function() { 
     $(this).animate({backgroundColor:'#2E8AE5'}, slow); 
    }); 
});

它的意思是：

1）未設置CSS屬性background-color從僞列表項-class :hover在無序列表中帶有一個mainmenu的id（這樣，那些未啓用Javascript的用戶仍然可以體驗到我試圖用jQuery實現的類似效果）

2）當相同的列表項它應該在所述列表項上以背景顏色動畫。

但它沒有。相反，第一項任務甚至沒有完成，更不用說懸停後臺的動畫了。值得注意的是，我已經三重檢查了我的元素（我甚至將它們複製並粘貼到腳本中以確保）。

而我正在使用jQuery UI--據我瞭解，它可以執行涉及動畫某些CSS屬性的任務。想法？

來源

2011-12-25 ReactingToAngularVues

編輯

它應該是 '背景色'。不backgroundColor。即

$(this).animate({'background-color':'#2E8AE5'}, "slow");

對速度的參數應該是字符串或數字。例如：「慢」或10000（毫秒）。

例如：

$(this).animate({backgroundColor:'#2E8AE5'}, "slow");

或

$(this).animate({backgroundColor:'#2E8AE5'}, 1000); // in millisecs

來源

2011-12-25 10:04:47 techfoobar

哎呀，這是一個深夜 - 我應該拿起那個，但它不但是解決我的問題。 – ReactingToAngularVues 2011-12-25 10:11:44

請看我更新的答案。 – techfoobar 2011-12-25 15:16:03

'backgroundColor'是jQuery中一個有效的CSS屬性，正如Tim的回答所證明的，同樣，這並不能解決我的問題。 – ReactingToAngularVues 2011-12-25 21:00:25

做這項工作？：

$(document).ready(function() { 
    var $lis=$('#mainmenu li'); 
    $lis.css({backgroundColor:'#aaa'}); 
    $lis.hover(function() { 
     $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); 
    }); 
});

來源

2011-12-25 10:07:58 bingjie2680

其實，我只是重試它的第一個背景顏色設置爲#AAA而不是空白，它的工作！：D但是有沒有什麼辦法可以將'background-color'設置爲無，因爲不得不將其設置爲預設顏色，從而在鼠標懸停前廢棄了它的外觀？乾杯。 – ReactingToAngularVues 2011-12-25 10:23:10

此外，它也會影響此菜單中的子菜單。有沒有什麼方法可以將動畫應用於特定元素，而不是繼承它的子元素？ – ReactingToAngularVues 2011-12-25 10:26:01

@ Antilogical13你可以使用'background-color：inherit;' – henryaaron 2011-12-25 17:28:10

由於mentioned before ...使用的顏色插件

http://jsfiddle.net/Mb6Nd/

$(document).ready(function() { 
    var lis = $('#mainmenu > li'); 
    $(lis).hover(
     function() { 
      $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); 
     }, 
     function(){ 
      $(this).animate({backgroundColor:'#cecece'}, 'fast'); 
     } 
    ); 
});

來源

2011-12-25 11:15:52

這很好，除了我的開始顏色是透明的，並且這不適用於透明的開始顏色，加上它影響子元素（一個子菜單） - 所以真的，這不是我想要的。 – ReactingToAngularVues 2011-12-25 20:59:15

將您的目標ID更改爲#mainmenu> li將使其僅影響父級別li而不影響子級li。也可以嘗試的backgroundColor：「透明很重要！」

試試這個：

$(document).ready(function() { 
    var $lis=$('#mainmenu > li'); 
    $lis.css({backgroundColor:'transparent !important'}); 
    $lis.hover(function() { 
     $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); 
    }); 
});

來源

2012-08-06 15:55:38 Lee

我認爲這是在背景色，前景色和邊框顏色使用插件，像color animation jQuery plugin褪色的最佳解決方案，

使用：

< \腳本類型= 「文本/ JavaScript的」 SRC = 「http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js」>

（刪除反斜槓）。

並輸入之前的代碼。喜歡。

$('#demodiv').animate({backgroundColor: '#400101'});

更多參考click here

來源

2013-07-05 21:42:27

jquery在懸停的背景顏色屬性中褪色？

回答

相關問題