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

Question

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

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

$(".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");
  });
});