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，除了你提供更多的代码，或者小提琴，我们都会猜测。你能在Codepen或Fiddle上提供一个工作原型吗？

话虽如此，你会想要停止使用JS来检查CSS属性状态（background-image），而是使用JS添加和删除类，并且只为类创建CSS规则。

最后请注意，根据您的问题，停止使用.fadeOut，而不是（再次）切换CSS类，一个是不透明度：0，另一个是不透明度：1，并使用过渡（即过渡：不透明度1s; ）

感觉我？

Answer 2

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

如果你有一个纯色的背景颜色，你想在转换中使半透明或透明，你可以使用background-color:rgba();属性，其中rgba()包含背景的RGB颜色的逗号分隔值A是alpha，它的作用类似于不透明度，但不会影响其他元素。

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

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

2 个答案: