Search code examples
jquerytwitter-bootstrapanimationtwitter-bootstrap-3animate.css

Animate.css using for dropdown menu


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


Solution

  • 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');
        });
    });