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

Bass Jobsen · Accepted Answer · 2013-09-27 19:44:59Z

2

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

answered Sep 27, 2013 at 19:44

Bass Jobsen

49.1k16 gold badges147 silver badges226 bronze badges

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

Comments

SaidbakR · Accepted Answer · 2018-05-02 03:42:39Z

0

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

    });
});

answered May 2, 2018 at 3:42

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

Collectives™ on Stack Overflow

Animate.css using for dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related