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