Animate.css using for dropdown menu

Question

Hi guys..

Just the question... I tried to make with animate.css and js animated dropdown menu its working, but not what i really want :)

I tried with addClass and removeClass but nothing....

Its possible to make animation -- hover on menu than open the dropdown.?

code:
    $(function() {
        $('.dropdown-toggle').hover(function() {
            $(this).next('.dropdown-menu').addClass('open animated fadeInDown');

        });
    });

If somebody have some idea please let me know :) Thanks

Answer 1

You should add the open class to your dropdown instead of your dropdown-menu:

$(function() {
    $('.dropdown-toggle').hover(function() {
        $('.dropdown').addClass('open');
        $('.dropdown-menu').addClass('animated fadeInDown');

    });
    $('.dropdown').on('hide.bs.dropdown', function () {
        $('.dropdown-menu').removeClass('animated fadeInDown');
    });
});

Answer 2

If there are many dropdown menus, the above code will make all of them animate. I have done the following modifications to the answer's code:

$(function() {
    $('.dropdown-toggle').hover(function() {
        $(this).addClass('open');
        $(this).next('.dropdown-menu').addClass('animated slideInDown');

    });
    $('.dropdown').on('hide.bs.dropdown', function () {
        $(this).next('.dropdown-menu').removeClass('animated slideInDown');

    });
});