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

Answer 1

In case Hector's solution doesn't work for you, here's an even uglier solution. (Where we eliminate JQuery's call all together)

Example of fadeOut:

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

Essentially we are relying to the CSS transition to do the transition and then we are simply waiting in the JS the duration of the transition as defined by the CSS.

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.

Answer 3

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.