如何使用jQuery動畫元素的背景不透明度？

我有一張圖片作爲我的HTML標籤和rgba（0,0,0，0.7）的背景顏色的背景;在我的BODY標籤上。我正在構建一個小腳本，這將允許我即時更改背景圖像，並執行此操作，我想將身體動畫爲rgba（0,0,0,1），更改圖像，然後生成動畫回到0.7的不透明度。如何使用jQuery動畫元素的背景不透明度？

我搜索了一下，發現一個名爲jQuery Color的jQuery插件，但該插件似乎在最新版本的jQuery「b.end is undefined」中被破壞。其他曾提出類似問題的人也回答說，該解決方案不再有效。

我有點茫然，所有Google搜索都會導致相同的插件，其他人是否知道解決方案？

目前，這是我嘗試：

jQuery('body').animate({ 
    'backgroundColor':'rgba(0, 0, 0, 1)' 
});

感謝所有幫助:)

來源

2013-07-18 Gazillion

jQuery UI可以做到這一點（所以你需要的是jQuery和jQuery UI）。

你已經差不多了。添加在head的jQuery UI的腳本調用你的jQuery腳本調用（<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>）後再試試這個：

jQuery('body').animate({ 
    backgroundColor: 'rgba(0, 0, 0, 1)' 
});

backgroundColor是jQuery的屬性名稱，它不需要加引號。只有具有不同相應jQuery屬性名稱的CSS屬性才需要引用，這將是background-color（backgroundColor代表的CSS屬性）。所以這也可以工作：

jQuery('body').animate({ 
    'background-color': 'rgba(0, 0, 0, 1)' 
});

這也可以用純粹的CSS3動畫完成。

來源

2013-07-18 19:10:11 Ennui

我對自己很生氣，事實證明我沒有jquery ui的最新版本，並且在事實之後添加了動畫功能。感謝您確認這實際上是一種UI功能。 – Gazillion

-1

在此question，你可以找到一個方法來做到這一點：

$(document.body).animate({opacity: 1}, 1000);

來源

2013-07-18 18:55:51 Hernandcb

透明度會 – ntgCleaner

您是分辯@ntgCleaner，尋找這在谷歌了一下，好像在改變整個div的整個透明度，而不僅僅是背景顏色最簡單的方法是使用插件。 [這]（http://www.bitstorm.org/jquery/color-animation/）看起來不錯，而且非常光滑。 – Hernandcb

不幸的是，插件也是舊的，似乎沒有與我使用的jQuery版本（最新版本）一起工作。 – Gazillion

我還沒有完成這段代碼，但這是純jQuery的基礎。這對你來說是個開始。嘗試是這樣的：

$('.background').click(function(){ 
    var changeColor; 
    var speed = 100; 
    var i = speed; 
    changeColor = setInterval(function(){ 
     i--; 
     var opacity = i/speed; 
     $('.background').css({backgroundColor: "rgba(0,0,0, " + opacity + ")"}); 
    }, 1); 
    setTimeout(function(speed){ 
     clearInterval(changeColor); 
    }, speed * 5); 

});

的基本原理是改變了一些每1ms然後將控制會充當你的背景顏色可變的百分比。這不是有效的，但它正是你想要的想法。

UPDATE檢查這裏的小提琴：http://jsfiddle.net/mV4st/3/

來源

2013-07-18 19:15:33 ntgCleaner

如何使用jQuery動畫元素的背景不透明度？

回答

相關問題