如何在jQuery中使用淡入淡出效果来防止内容消失

Question

我正在创建一个调光器插件，我想给它一个很好的渐变过渡。当我使用背景半透明的"png"图像时，为了使页面变暗，它是有效的，但问题是，当我给它提供渐变效果时，当我只想给背景提供这种效果时，所有东西都会消失。

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中附带的淡入淡出功能。

Answer 1

听起来你可能在不该有的东西上有那个CSS类。检查你的身体，或者主包装器，或者其他什么。shadow class byt我们都只是猜测，除非你提供更多的代码，或者Fiddle。你能在Codepen或Fiddle上提供一个工作原型吗？

话虽如此，您将希望停止使用JS来检查CSS属性状态（背景图像），而是使用JS添加和删除类，只为这些类创建CSS规则。

最后一点，根据你的问题，停止使用.fadeOut，而是（再次）切换CSS类，一个不透明度为0，另一个不不透明为1，并使用转换（即转换：不透明度为1s；）

感觉到我了吗？

Answer 2

我认为问题在于您对opacity（进而是.fadeOut()）的工作方式有错误的了解。如果将opacity值应用于某个元素，则该元素及其所有子元素都会受到该值的影响。因此，将opacity:.5;设置为父对象会将其和内部的所有内容设置为半不透明度。

如果您有一个想要在过渡中使其半透明或透明的实心背景色，则可以使用background-color:rgba();属性，其中rgba()包括背景的RGB颜色的逗号分隔值，而a是alpha，其工作原理类似于不透明度，但不会影响其他元素。

如果您只处理一张图像，则与该图像之间的转换应该有效。但是，如果您希望该图像是半透明的，则需要创建第二张图像，并将不透明度应用于该图像（例如在Photoshop中），然后转换到第二张图像。