jQuery - 具有懸停效果的多個項目

在CSS中，我有幾個具有懸浮效果的DIV項目。如果我將鼠標懸停在某個元素上，則該元素具有另一種背景顏色。如果我將鼠標懸停在另一個項目上，則上一個選定項目具有默認背景顏色而不懸停。jQuery - 具有懸停效果的多個項目

我該如何做到這一點與jQuery？我想爲背景顏色設置動畫效果，但想要在其他項目上懸停時消失淡入淡出效果（動畫效果）。我用窗口超時試了一下，但是在將鼠標指針滑過幾個元素之後，所有的東西都閃爍並且出現了錯誤。

這是我在用於動畫效果上的鼠標代碼：

$('.entry').mouseover(function() { 
(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false }); 
});

jQuery的顏色被安裝的插件;）

來源

2012-07-15 thonixx

你需要做這樣的事情：

請輕彈jsfiddle的代碼我會看看，但試試這個：

我不知道是什麼原因使用queue and duration我認爲你知道:)因此您正在使用它。

希望它有助於事業。

var items = '.entry' 
$(items).hover(function() { 
    // Mouseover state 
    $(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false }); 
}, function() { 
    // Mouseout state 
    $(this).animate({ backgroundColor: "black" }, { duration: 500, queue: false }); 
});

來源

2012-07-15 22:01:57

您必須將項目放入$（）括號中：$（items）。然後它適用於所有元素。 – thonixx 2012-07-15 23:32:10

行得通。我會編輯你的答案。謝謝你的幫助。 – thonixx 2012-07-15 23:33:07

@thonixx很高興幫助'：）'有趣的是我得到了downvoted大聲笑隨機'：）'哦，並且確實編輯！ – 2012-07-15 23:39:17

的動畫元素的background-color如jQuery的本身並不動畫的顏色，你應該使用jQuery Color插件。

這個插件安裝了cssHook，它允許jQuery的.animate()在兩種顏色之間進行動畫處理。

來源

2012-07-15 22:02:20 undefined

已安裝jQuery Colors插件;） – thonixx 2012-07-15 23:27:49

jQuery - 具有懸停效果的多個項目

回答

相關問題