jQuery onclick addclass/removeclass并添加淡入淡出 [英] jQuery onclick addclass/removeclass and add fade

问题描述

过去三天，我一直在寻找解决问题的方法.我见过很多人和我有同样的问题，但是没有一个解决方案可以解决我的问题.因此，我再次回到了我的起点，并向您友好的人们寻求帮助！

The past three day I have been searching for a solution to my problem. I have seen a lot of people with the same question as I have, but not one solution fixes my problem. So I am again where I started and I am asking for the help of you friendly people!

我现在正在运行以下脚本，该脚本非常适合我:

I now have the following script running that works perfect for me:

$(".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毫秒)，我无法解决这个问题.

The only thing I can't get to work, is the fading in and out of elements. I have tried a lot of solution like toggle and show/hide, but this works the best for me. The only simple thing that I need is that fading is added to the script (1000 ms), I just can't work that out.

有人可以帮助我吗?预先感谢.

Can someone help me? Thanks in advance.

推荐答案

$(".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().只是一定要真正研究文档，并在深入了解此文档之前确切地知道您想要什么.它更灵活，但不那么简单.

As a side note, for more complex scenarios, a more controllable alternative is to use jQuery.animate(). Just be sure to really look into the documentation and know exactly what you want before diving into this. It is much more flexible, but not nearly as straightforward.

例如，问题中提供的部分代码的 unested 版本:

For example, an untested version of part of the code provided in the question :

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

这篇关于jQuery onclick addclass/removeclass并添加淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！