向自举下拉列表中添加幻灯片效果

我正在使用引导 ，我想添加animation到下拉菜单。

我想给它添加一个animation，当它离开时，向下滑动并备份。

我怎么能这样做？

我试过的东西：

像这样改变Js下拉文件：

我怎样才能使Bootstrap的导航下拉幻灯片顺利上下？

任何帮助将是好的！ 谢谢！。

Answer 1

如果你更新到引导3（BS3），他们已经暴露了很多Javascript事件，很好地绑定你想要的function。 在BS3中，这段代码会给你所有的下拉菜单select你正在寻找的animation效果：

// Add slideDown animation to Bootstrap dropdown when expanding. $('.dropdown').on('show.bs.dropdown', function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // Add slideUp animation to Bootstrap dropdown when collapsing. $('.dropdown').on('hide.bs.dropdown', function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); }); 

您可以在这里阅读关于BS3事件的信息 ，特别是关于这里的下拉事件。

Answer 2

也可以避免使用JavaScript的下拉效果，并使用css3过渡，通过添加代码的这个小的和平你的风格：

 .dropdown .dropdown-menu { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; max-height: 0; display: block; overflow: hidden; opacity: 0; } .dropdown.open .dropdown-menu { max-height: 300px; opacity: 1; } 

这种方法唯一的问题是你应该手动指定最大高度。 如果你设置了非常大的值，你的animation将非常快。

如果你知道下拉列表的大概高度，它就像一个魅力，否则你仍然可以使用JavaScript来设置精确的最大高度值

这里是一个小例子： DEMO

---

！ 在这个解决scheme中有一个小填充的bug，检查Jacob Stamm评论与解决scheme。

Answer 3

我正在做这样的事情，但hover，而不是点击..这是我使用的代码，你可能可以稍微调整一下，让它工作点击

 $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp() }); 

Answer 4

我不知道是否可以碰到这个线程，但我想出了一个快速修复的问题，当打开的类被删除太快时发生的视觉错误。 基本上，所有这些都是在slideUp事件中添加一个OnComplete函数，并重置所有活动的类和属性。 像这样的东西：

结果如下： Bootply例子

使用Javascript / jQuery的：

 $(function(){ // ADD SLIDEDOWN ANIMATION TO DROPDOWN // $('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // ADD SLIDEUP ANIMATION TO DROPDOWN // $('.dropdown').on('hide.bs.dropdown', function(e){ e.preventDefault(); $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){ //On Complete, we reset all active dropdown classes and attributes //This fixes the visual bug associated with the open class being removed too fast $('.dropdown').removeClass('open'); $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false'); }); }); }); 

Answer 5

这里是我的幻灯片和淡出效果的解决scheme：

  // Add slideup & fadein animation to dropdown $('.dropdown').on('show.bs.dropdown', function(e){ var $dropdown = $(this).find('.dropdown-menu'); var orig_margin_top = parseInt($dropdown.css('margin-top')); $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){ $(this).css({'margin-top':''}); }); }); // Add slidedown & fadeout animation to dropdown $('.dropdown').on('hide.bs.dropdown', function(e){ var $dropdown = $(this).find('.dropdown-menu'); var orig_margin_top = parseInt($dropdown.css('margin-top')); $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){ $(this).css({'margin-top':'', display:''}); }); }); 

Answer 6

我正在使用上面的代码，但我改变了slideToggle的延迟效果。

它用animation滑动下拉hover。

 $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400) }); 

Answer 7

点击它可以完成使用下面的代码

 $('.dropdown-toggle').click(function() { $(this).next('.dropdown-menu').slideToggle(500); }); 

Answer 8

扩大答案，是我的第一个答案，如果之前没有足够的细节，那么原谅。

对于Bootstrap 3.x我个人比较喜欢CSSanimation，而且我一直在使用animate.css和Bootstrap Dropdown Javascript Hooks。 虽然它可能不具有完全的效果，但它是一个非常灵活的方法。

第1步：添加animate.css到您的页面的头标签：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"> 

步骤2：在触发器上使用标准的Bootstrap HTML：

 <div class="dropdown"> <button type="button" data-toggle="dropdown">Dropdown trigger</button> <ul class="dropdown-menu"> ... </ul> </div> 

步骤3：然后将2个自定义数据属性添加到dropdrop-menu元素; 数据下拉式inputanimation和数据下拉输出animation。 这些可以是任何animate.css效果，如fadeIn或fadeOut

 <ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut"> ...... </ul> 

第4步：接下来添加以下Javascript来读取数据下拉式输出数据属性，并对Bootstrap Javascript API挂钩/事件（ http://getbootstrap.com/javascript/#dropdowns-events ）作出反应：

 var dropdownSelectors = $('.dropdown, .dropup'); // Custom function to read dropdown data // ========================= function dropdownEffectData(target) { // @todo - page level global? var effectInDefault = null, effectOutDefault = null; var dropdown = $(target), dropdownMenu = $('.dropdown-menu', target); var parentUl = dropdown.parents('ul.nav'); // If parent is ul.nav allow global effect settings if (parentUl.size() > 0) { effectInDefault = parentUl.data('dropdown-in') || null; effectOutDefault = parentUl.data('dropdown-out') || null; } return { target: target, dropdown: dropdown, dropdownMenu: dropdownMenu, effectIn: dropdownMenu.data('dropdown-in') || effectInDefault, effectOut: dropdownMenu.data('dropdown-out') || effectOutDefault, }; } // Custom function to start effect (in or out) // ========================= function dropdownEffectStart(data, effectToStart) { if (effectToStart) { data.dropdown.addClass('dropdown-animating'); data.dropdownMenu.addClass('animated'); data.dropdownMenu.addClass(effectToStart); } } // Custom function to read when animation is over // ========================= function dropdownEffectEnd(data, callbackFunc) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; data.dropdown.one(animationEnd, function() { data.dropdown.removeClass('dropdown-animating'); data.dropdownMenu.removeClass('animated'); data.dropdownMenu.removeClass(data.effectIn); data.dropdownMenu.removeClass(data.effectOut); // Custom callback option, used to remove open class in out effect if(typeof callbackFunc == 'function'){ callbackFunc(); } }); } // Bootstrap API hooks // ========================= dropdownSelectors.on({ "show.bs.dropdown": function () { // On show, start in effect var dropdown = dropdownEffectData(this); dropdownEffectStart(dropdown, dropdown.effectIn); }, "shown.bs.dropdown": function () { // On shown, remove in effect once complete var dropdown = dropdownEffectData(this); if (dropdown.effectIn && dropdown.effectOut) { dropdownEffectEnd(dropdown, function() {}); } }, "hide.bs.dropdown": function(e) { // On hide, start out effect var dropdown = dropdownEffectData(this); if (dropdown.effectOut) { e.preventDefault(); dropdownEffectStart(dropdown, dropdown.effectOut); dropdownEffectEnd(dropdown, function() { dropdown.dropdown.removeClass('open'); }); } }, }); 

第5步（可选）：如果你想加快或改变animation，你可以用CSS来做到这一点，如下所示：

 .dropdown-menu.animated { /* Speed up animations */ -webkit-animation-duration: 0.55s; animation-duration: 0.55s; -webkit-animation-timing-function: ease; animation-timing-function: ease; } 

如果有人对此感兴趣，请写下更详细的文章和下载文章： http : //bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

希望这是有用的，这第二个写了具有所需的细节水平汤姆

Answer 9

 $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); }); 

如果你想揭示hover的下拉菜单，这个代码的作品。

我只是将.slideToggle改为.slideDown ＆ .slideUp ，并删除了(400)时机

Answer 10

这是一个很好的使用jQuery简单解决scheme：

 $('.dropdown-toggle').click(function () { $(this).next('.dropdown-menu').slideToggle(300); }); $('.dropdown-toggle').focusout(function () { $(this).next('.dropdown-menu').slideUp(300); }) 

点击时发生幻灯片animation切换，并总是在失去焦点时滑回。

将300值改为任何你想要的值，数字越小，animation越快。

编辑：

此解决scheme仅适用于桌面视图。 这将需要进一步的修改，以便为移动显示很好。