jQuery onclick addclass/removeclass and add fade

Question

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

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.

Solution

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

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.

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

Comments

[Brett Weber]

Do the show and hide classes determine the display property?

[Sodj]

Yes, sorry. The classes: commentsandnotes_container and .commentsandnotes_bg have a display: none. And the class .show has a display: block.

[Brett Weber]

Are they used for anything other than the display property? sucha as in another peice of code?

[Sodj]

WOW, thank you so much! That was so fast, exactly what I was looking for! Thanks to you I finally understand how it must be done (after three days trying). You sir a true gentleman :)

[Brett Weber]

You are welcome. ive hit the same issue a few times, and complicated it so much more looking for this answer. :) I am glad i could help someone else with an issue i have already come across