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（）电话。

Bootstrap Hover slideUp slideDown动画

2 个答案: