jQuery animate背景顏色slideDown

我想在懸停元素時爲背景色設置動畫。jQuery animate背景顏色slideDown

例如，假設我有一個div，當我懸停時，我希望背景在鼠標離開時變成紅色，並且滑動下滑和淡出。

$('div.Item').hover(function() { 
    $(this).css('background-color', 'red').slideDown(400); 
}, 
function() { 
    $(this).css('background-color', 'transparent').fadeOut(400); 
});

有2個問題與此..對了slideDown心不是工作，紅色剛剛進來..還當鼠標離開時，元件就完全dissapearing（我假設，因爲淡出正在努力的元素本身而不是背景顏色的過渡）。

有沒有任何教程或任何人可以幫助實現這一目標？

來源

2013-05-04 Kelish

'.slideDown'應用於您的元素，而不是背景顏色 – 2013-05-04 10:51:37

是的，我知道，我如何在背景顏色上做到這一點？多數民衆贊成我遇到的問題 – Kelish 2013-05-04 10:54:42

SlideDown應用於背景顏色？你的意思是/期望什麼？ – 2013-05-04 10:57:11

這是因爲fadeOut是一個jQuery對象方法。它只適用於使用jQuery選擇的DOM元素。對您的問題最優雅的解決方案是使用CSS transitions。

這裏是一個僞CSS snipet與質量要求：

div.Item 
{ 
    background-color: #your-background-color; 
    -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ 
    -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */ 
    transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 
} 
div.Item:hover 
{ 
    background-color: #your-new-background-color; 
}

總是嘗試寫儘可能少的代碼越好。避免在你的css類名中使用大寫字母。

來源

2013-05-04 11:15:43

這將淡化背景顏色，它需要是像他的示例鏈接中那樣滑動的圖像。 – 2013-05-04 11:45:05

可以實現通過使背景圖片，還使用.animate改變CSS和動畫效果一起，而不是保持鏈接相同的效果，這個代碼將有助於：

$('#nav a') 
.css({backgroundPosition: "0 0"}) 
.mouseover(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 250px)"}, 
     {duration:500}) 
    }) 
.mouseout(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 0)"}, 
     {duration:500}) 
    })

檢查這個LINK和也看演示！

來源

2013-05-04 11:26:54

這是最接近的答案，但是我的問題是我想要一個動態顏色，允許用戶更改它而不是具有固定圖像。 – Kelish 2013-05-04 15:00:40

@Kelish有一種方法，但我不認爲它是語義的，也不是一個明智的舉動，你可以在你的div下面有另一個div - *你必須在這種情況下將它的背景設置爲透明的。用戶懸停在所需的div上，像這樣'$（'＃nav a'）。mouseover（function（）{$（＃backDiv）.animate（{top：'150px'}，2000）}）。（）{$（＃backDiv）.animate（{top：'0px'}，2000）}）' – 2013-05-04 15:55:37

jQuery animate背景顏色slideDown

回答

相關問題