Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why do jQuery's .fadeOut() and .fadeIn() stop working when a transition is applied in CSS

Why do jQuery's .fadeOut() and .fadeIn() stop working when a transition is applied in CSS

Problem

When I apply a Transition on an element with CSS, jQuery's .fadeOut() and .fadeIn() stop working.

I have a Solution for this but, why does this happen?

Why do .fadeOut() and .fadeIn() work like .hide() ?

Where have the effects gone while there is a css transition being applied?

When I have to apply any jQuery animation, I always remove the transition and then apply jQuery animation and then add the transition back!

Is there any other trick to do this? Or is this the only way?

  cloned.css('transition', 'none');
  cloned.fadeOut();

  setTimeout(function(){

    cloned.css('transition', 'all 500ms  cubic-bezier(0.5, 0.1, 0.7, 1.5)');

   });
Problem courtesy of: Ashish Mishra

Solution

fadeOut and Fadein will work with transitions, so long as you are not setting the transition to effect changes in opacity.

Working Example

$('.div1').click(function () {
    if ($('.div2').is(':visible')) {
        $('.div2').fadeOut(3000);
        $('.div2').css('height', '0px');
    } else {
        $('.div2').fadeIn(3000);
        $('.div2').css('height', '400px');
    }
});

.div1 {
    height:20px;
    width: 200px;
    background: blue;
}
.div2 {
    display:none;
    height:100px;
    width: 200px;
    background: red;
    transition: background-color 3s, height 3s;
}

Here's why this works:

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

From the API Documentation

So, basically both fadeOut and fadeIn animate the opacity of the element, if you set transition: all or transition: opacity you're trying to run two different animations on the same property at the same time.

To work around this you can simply specify which properties you want the css transition to apply to.

Rather than using this:

.some_element {
    transition: all 1s;
}

Use this:

.some_element {
    transition: height 1s, background-color 1s, some_other_property 2s;
}
Solution courtesy of: apaul34208

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why do jQuery's .fadeOut() and .fadeIn() stop working when a transition is applied in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×