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 t

Answer 1

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/