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

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

1 个答案: