CSS3 transition with jQuery .addClass and .removeClass

Question

I have a big main navigation panel that I want to animate when it's deploying (expanding).

I'm working with jQuery to trigger the visibility of it by adding/removing the class visible/hidden.

I had to set a delay time to apply the hidden class because the trigger is a button outside of the panel's div. (if I used a rollover on the button, once you rollout the panel will disappear)

The code is this

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hidden');
        $('#repair-drop').addClass('visible');
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').removeClass('visible').addClass('hidden');
    }, 600);        

});
});

My CSS is as follows

.hidden{
    max-height: 0px;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;

}
.visible{
    max-height: 500px;  
}

The transition effect is not working at all.

you can do animations with the addClass RemoveClass and other things if you use jQueryUI too — CRABOLO
– CRABOLO, Commented Jan 15, 2014 at 21:47

user956584 · Accepted Answer · 2016-02-27 23:54:51Z

20

I am tired of this issue, better use animation:

.container .element.animation  {
    animation: SHW .5s;
    animation-fill-mode: both
}
@keyframes SHW {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}

Add only to .element class .animation and its working:

$('.container .element').addClass('animation');

edited Feb 27, 2016 at 23:54

answered Sep 14, 2014 at 23:22

user956584

5,5875 gold badges44 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

simsketch Over a year ago

best performance and easiest implementation of all solutions here, imo.

Fresheyeball · Accepted Answer · 2018-03-08 17:02:41Z

18

You are adding and removing the class that contains the transition CSS. I recommend moving that to its own rule DEMO.

.hidden{
    max-height: 0px;
}
.visible{
    max-height: 500px;  
}

#repair-drop{
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

edited Mar 8, 2018 at 17:02

answered Jan 15, 2014 at 21:55

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

1 Comment

Miguel G. Flores Over a year ago

This doesn't works fine when having content inside the div (jsfiddle.net/jzoe0q15)

Blazemonger · Accepted Answer · 2014-01-15 21:56:00Z

5

Don't remove the .hidden class; it contains your transition styles. Just add and remove the .visible class.

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        setTimeout(function() {
            $('#repair-drop').removeClass('visible');
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/LjhNa/

That said, you might need to improve your solution to account for users rapidly mousing out of #repair-drop and clicking on #menu-item-9 before it can hide.

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').data('shown',true).addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        $('#repair-drop').data('shown',false);
        setTimeout(function() {
            if (!$('#repair-drop').data('shown')) {
                $('#repair-drop').removeClass('visible');
            }
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/b8QpB/

edited Jan 15, 2014 at 21:56

answered Jan 15, 2014 at 21:48

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

3 Comments

Jaypee Over a year ago

Your answer is very logical, I didn't realize about that, and you're right. Although, I applied it and the transition is not showing

Blazemonger Over a year ago

You'll need to provide some HTML and/or a working demo, then.

Jaypee Over a year ago

I'm working now with the jquery easing plugin and seems I got it to work

jbwebtech · Accepted Answer · 2014-01-15 21:50:58Z

2

Have you considered using jQuery UI's animation features? such as

jQuery('#menu-item-9').hide({duration:200,effect:'blind'});

You could also animate the removal of the class, like

jQuery('#menu-item-9').removeClass('hidden', {duration:200,effect:'blind'});

answered Jan 15, 2014 at 21:50

jbwebtech

4366 silver badges12 bronze badges

Comments

Jaypee · Accepted Answer · 2014-01-15 22:11:42Z

1

I found a way to make this work using jquery easing plugin. Thanks to all for your responses

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hide');
        $('#repair-drop').animate({"max-height":"500px", "padding-top":"20px", "opacity":"1"},1500, "easeOutCubic");
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').animate({"max-height":"0px", "overflow":"hidden", "padding":"0px","opacity":"0"},2000, "easeOutCubic");

    }, 600);        

});
});

edited Jan 15, 2014 at 22:11

answered Jan 15, 2014 at 22:03

Jaypee

1,2906 gold badges17 silver badges38 bronze badges

1 Comment

Youp Bernoulli Over a year ago

Nicely done, but... these days css transitions are considered the way to do animation. Super simple jquery code with add and remove class and then all the animation properties inside css.

Collectives™ on Stack Overflow

CSS3 transition with jQuery .addClass and .removeClass

5 Answers 5

1 Comment

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related