Bootstrap dropdown menu slide animation on hover

Question

I'm trying to implement a slide up/down animation on a Bootstrap menu drowdown. The version of the framework is 3.1. The hover works but the slide up/slide down still works on click and not on hover.

Ultimate goal is to make it slide down on mouse over and slide up on mouse out.

I'm using this plugin for the hover effect

Code:

;
(function ($, window, undefined) {
    // don't do anything if touch is supported
    // (plugin causes some issues on mobile)
    if ('ontouchstart' in document) return;

    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function (options) {

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function () {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function (event) {
                // so a neighbor can't open the dropdown
                if (!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if (settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.trigger($.Event('show.bs.dropdown'));
            }, function () {
                timeout = window.setTimeout(function () {
                    $parent.removeClass('open');
                    $parent.trigger('hide.bs.dropdown');
                }, settings.delay);
            });

            // this helps with button groups!
            $this.hover(function () {
                if (settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.trigger($.Event('show.bs.dropdown'));
            });

            // handle submenus
            $parent.find('.dropdown-submenu').each(function () {
                var $this = $(this);
                var subTimeout;
                $this.hover(function () {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').first().stop(true, true).slideDown();
                    // always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').first().stop(true, true).slideUp();
                }, function () {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function () {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function () {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
        // Slide Down //
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // Slide Up //
        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
        });
    });
})(jQuery, this);

Answer 1

I don't think you need all of that code just to make it drop down on hover, I did the same using this jQuery its worked fine for me and much simpler.

$(document).ready(function() {    
  $('.navbar-default .navbar-nav > li.dropdown').hover(function() {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
      }, function() {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
      });
   });