jQuery onclick addclass / removeclass并添加淡入淡出

过去三天我一直在寻找解决问题的方法。 我见过很多人和我有同样的问题，但没有一个解决方案可以解决我的问题。 所以我又是我开始的地方，我要求友好的人帮助你！

我现在运行以下脚本，对我来说非常合适：

$(".show_commentsandnotes_container").click(function () { $('.commentsandnotes_bg').addClass('show'); $('.commentsandnotes_container').addClass('show'); }); $(".commentsandnotes_bg").click(function () { $('.commentsandnotes_bg').removeClass('show'); $('.commentsandnotes_container').removeClass('show'); }); 

我唯一无法工作的是元素的淡入淡出。 我尝试了很多解决方案，比如切换和显示/隐藏，但这对我来说效果最好。 我需要的唯一简单的事情是脚本中添加了淡入淡出（1000毫秒），我无法解决这个问题。

有人能帮我吗？ 提前致谢。

Answer 1

 $(".show_commentsandnotes_container").click(function () { $('.commentsandnotes_bg').fadeIn(1000, function() { $('.commentsandnotes_bg').addClass('show'); }); $('.commentsandnotes_container').fadeIn(1000, function() { $('.commentsandnotes_container').addClass('show'); }); }); $(".commentsandnotes_bg").click(function () { $('.commentsandnotes_bg').fadeOut(1000, function() { $('.commentsandnotes_bg').removeClass('show'); }); $('.commentsandnotes_container').fadeOut(1000, function() { $('.commentsandnotes_container').removeClass('show'); }); }); 

作为旁注，对于更复杂的场景，更可控的替代方法是使用jQuery.animate（） 。 在深入研究之前，请务必仔细查看文档并确切了解您的需求。 它更灵活，但不是那么简单。

例如，问题中提供的部分代码的未经测试版本：

 $( "#show_commentsandnotes_container" ).click(function() { $("#commentsandnotes_bg" ).animate({ opacity: 0.25, height: "toggle" }, 1000, function() { $("#commentsandnotes_bg").addClass("show"); }); });