Conflict between CSS transition and jQuery fade

Question

I am trying to create a tiled wall with a small menu for display: none some elements based on their class. In my CSS, I have CSS transitions that cause fadeIn and fadeOut not work. If I add time, the item will take so long to disappear, but there is no actual fading.

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

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 transitions from my CSS, then fades really work, but I also want the transition to be moved in order to move the elements after they are discovered / hidden.

Answer 1

I usually do what millimosis offers:

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

Where transEnabl is something like:

 .transEnabl { transition: all 0.3s linear; } 

It is ugly, but it works. The problem arises because css transitions give the duration of opacity execution.

Answer 2

I would say that the cleanest solution for this is to add an additional element around the element that you want to fade away. For example, if you are trying to remove this item:

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

You do html as follows:

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

And then you just fade away the parent:

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

And there is no need for ugly fixes.

Answer 3

In case the Hector solution does not work for you, here is an even uglier solution. (Where we eliminate jQuery call together)

FadeOut example:

 $('#test').css('opacity', 0); window.setTimeout(function() { $('#test').remove(); }, $('#test').css('transition-duration').replace('s','')*1000); 

Essentially, we rely on the CSS transition to make the transition, and then we just expect the transition duration in JS as defined by CSS.