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