Bootstrap Hover slideUp slideDown動畫

Question

我使用此代碼在鼠標懸停時顯示引導程序下拉列表

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

我使用此代碼來消除小屏幕上的懸停效果並在大屏幕上工作

如何使此代碼幻燈片動畫？

如果有比此代碼更好的代碼，請在注釋中添加

我英語不好，對不起:)

Answer 1

我建議使用http://daneden.github.io/animate.css/項目，並添加所需的css類，我將嘗試整理一個簡單的示例

這是一個快速而骯臟的演示

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

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

Answer 2

您可能想使用類似這樣的方法來處理鼠標事件（不需要$ .on（））：

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

因此您的代碼應如下所示。

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

您正在尋找slideDown（）和slideUp（）的Jquery動畫，並且將它與.hover（）jquery事件處理程序結合起來應該可以為您提供所需的內容。

您可能會丟失.on（）調用。