Conflict between CSS transition and jQuery fade

Question

I'm trying to create a tiled wall with a little menu to display: none some elements based on their class. In my CSS I have CSS transitions which are causing fadeIn and fadeOut to not work. If I add a time, the element will take that long to disappear, but there is no actual fading.

The CSS:

.block:not(.noTransition), .block a img, #main_side p, #main_content, #menu_container{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

The JavaScript using jQuery:

$(document).ready(function(){
    $('.button').not("#all").click(function(){
        var theId = $(this).attr('id');
        $('.block').not('.'+theId).addClass("noTransition");
        $('.block').not('.'+theId).fadeOut('slow', function(){
            $('.block').not('.'+theId).addClass("covered");
            $('.block').not('.'+theId).removeClass("noTransition");

        });
        $('.'+theId).addClass("noTransition");
        $('.'+theId).fadeIn('slow',function(){
            $('.'+theId).removeClass("covered");
            $('.'+theId).removeClass("noTransition");    
        });
        getScreenSize();
    });
    $("#all").click(function(){
        $('.block').removeClass("covered");
        $('.block').show();
    });
    getScreenSize();
});

If I remove the transitions from my CSS the fades do work, but I also want to keep the transitioning to reposition the elements after they have been revealed/hidden.

Answer 1

I'd say the cleanest fix for this is to put an extra element around the element that you want to fade. For instance if you're trying to fade this element:

<div id="fade"></div>

You make the html this:

 <div id="fade-parent">
      <div id="fade"></div>
 </div>

And then you just fade the parent:

 $('#fade-parent').fadeIn();

And there's no need for ugly fixes.

Answer 2

I usually do what millimoose suggests:

$('#cboxClose').removeClass('transEnabl').fadeIn(500, function() {
  $(this).addClass('transEnabl'); 
});

Where transEnabl is something like:

.transEnabl {
  transition: all 0.3s linear;
}

It is ugly as hell, but it works. The problem comes because css transitions are giving a duration on the execution of the opacity.