CODEWITHSUNDEEP
jquerycss
Jake Rowsell
Jake Rowsell

Reputation: 466

Conflict between CSS transition and jQuery fade

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.

Upvotes: 5

Views: 3570

Answers (3)

Anwardo
Anwardo

Reputation: 710

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.

Upvotes: 4

Hanna
Hanna

Reputation: 10753

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.

Upvotes: 0

user900362
user900362

Reputation:

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.

Upvotes: 3

Related Questions