如何在jQuery中使用淡入淡出效果，防止內容消失？

我正在創建一個調光器插件，我想給它一個很好的淡入淡出過渡。當我使用背景半透明的'png'圖像來使頁面變暗時，它可以工作，但問題是，當我給它淡入淡出效果時，當我只想將該效果僅渲染到背景時，所有內容都會消失。如何在jQuery中使用淡入淡出效果，防止內容消失？

var $j = jQuery; 
$j(document).ready(function(){ 


// Hide shadow 

jQuery(".shadow-class").css('background', 'none'); 

jQuery(".custom-read-more-toggle").on("click", function() { 

if(jQuery(".shadow-class").css('background-image') == 'none') { 
    jQuery(".shadow-class").css({background : 'url(/* PNG HERE*/)'}).fadeOut(1000); 
} else if (jQuery(".shadow-class").css('background', 'url(/*PNG HERE*/)')){ 
jQuery(".shadow-class").css('background', 'none'); 
} 

}); 

});

我能做些什麼來防止一切消失？請注意，我已經刪除了if-else中附加的淡入淡出功能。

來源

2015-11-25 fabio

你可以發佈http://jsfiddle.net/ – Chris

聽起來像你可能有你不應該有的CSS類。檢查你的身體，或主包裝，或其他什麼，爲什麼.shadow-class通過我們都會猜測，除非你提供更多的代碼，或小提琴它。你可以在Codepen或Fiddle上提供一個工作原型嗎？這就是說，你會想停止使用JS來檢查CSS屬性狀態（背景圖像），而是使用JS添加和刪除類，併爲類創建CSS規則。

最後一個音符，根據您的問題，請停止使用.fadeOut，而是（再次）只需撥動CSS類，一個不透明度：0和其他與透明度：1，並使用轉換（即過渡：不透明度1S ;）

感覺我？

來源

2015-11-25 09:08:17

我認爲問題在於您誤導了opacity的工作方式（又取決於.fadeOut()）。如果將opacity值應用於元素，則該值及其所有子元素均受該值的影響。所以將opacity:.5;設置爲父項將會將其設置爲半透明。

如果您想要在過渡時使半透明或透明的背景色爲純色，則可以使用background-color:rgba();屬性，其中rgba()包含背景的RGB顏色的逗號分隔值，A是alpha，其工作像不透明，但不會影響其他元素。

如果您只使用一張圖片，則圖片之間的轉換應該可以工作，但是如果您希望圖片是半透明的，則需要創建第二張圖片，並將不透明度應用於該圖片（例如在Photoshop中），然後轉換到第二張圖像。

來源

2015-11-26 17:30:58

如何在jQuery中使用淡入淡出效果，防止內容消失？

回答

相關問題