Bootstrap Hover slideUp slideDown Animation

Question

I use this code to make bootstrap dropdown show when mouse hover

var bMobile;  // true if in mobile mode

// Initiate event handlers
function init() {
    "use strict";
    // .navbar-toggle is only visible in mobile mode
    bMobile = $('.navbar-toggle').is(':visible');
    var oMenus = $('.navbar-nav .dropdown'),
        nTimer;
    if (bMobile) {
        // Disable hover events for mobile
        oMenus.off();
    } else {
        oMenus.on({
            'mouseenter touchstart': function(){
                event.preventDefault();
                clearTimeout(nTimer);
                oMenus.removeClass('open');
                $(this).addClass('open');
            },
            'mouseleave': function() {
                nTimer = setTimeout(function() {
                  oMenus.removeClass('open');
                }, 500);
            }
        });
  }
}
$(document).ready(function() {
  // Your other code to run on DOM ready...
  init();
});

$(window).resize(init);

I use this code to remove hover effect from small screens and work on big screens

How can make this code slide animation ?

and if there is code better than this code please add it in comment

I am bad in English, sorry :)

Answer 1

I recommend using the http://daneden.github.io/animate.css/ project, and adding the css class you want, i'll try to throw together a quick example

Here's a quick and dirty demo

$($(this).find(".dropdown-menu")[0]).addClass('bounceInUp animated');

http://jsfiddle.net/L8nz8zk2/1/

Answer 2

you would want to use something like this to handle the mouse events (no need for the $.on()):

http://api.jquery.com/hover/

so your code would look something like this.

$('CSS SELECTOR OF THE ITEM TO HOVER OVER').hover(function(){
   $('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE DOWN').slideDown();
},function(){
   $('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE UP').slideUp();
}); 

The Jquery animation of slideDown() and slideUp() is what you're looking for, and this combined with the .hover() jquery event handler should be able to give you what you need.

you can lose the .on() calls.