向引導程序下拉列表中添加幻燈片效果

Question

我正在使用bootstrap，我想將動畫添加到下拉列表中。

我想向它添加動畫，在離開時向下滑動並備份。

我該怎麼做？

事情我想：

改變JS文件下拉這樣的：

How can I make Bootstrap's navigation dropdown slide smoothly up and down?

任何幫助將是一件好事！謝謝！。

Answer 1

如果更新來引導3（BS3），他們已經暴露出很多是很好的配合你所期望的功能爲JavaScript事件。在BS3，這個代碼將會給你所有的下拉菜單，你正在尋找的動畫效果：

// 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事件here，特別關於下拉事件here。

Answer 2

我在做類似的東西，但是，懸停，而不是在點擊..這是我使用的代碼，你也許可以調整它一點得到它的點擊工作

$('.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 3

點擊它可以使用下面的代碼

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

Answer 4

我使用上面的代碼來完成，但我已經改變的slideToggle的延遲效果。

它使用動畫在懸停時滑動下拉菜單。

$('.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 5

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

如果您想要揭示懸停時的下拉列表，此代碼有效。

我只是改變了.slideToggle到.slideDown & .slideUp，並取消了(400)時間

Answer 6

這裏是我的滑&淡入淡出效果的解決方案：

// 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 7

我不知道如果我能碰到這個線程，但我想出了一個快速修復的問題，當公開類被刪除太快時發生的視覺錯誤。基本上，所有這些都是在slideUp事件中添加一個OnComplete函數，並重置所有活動的類和屬性。是這樣的：

下面是結果：Bootply example

使用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 8

也有可能避免使用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; 
} 

用這種方式唯一的問題是，你應該手動指定最大高度。如果你設置了一個非常大的值，你的動畫將非常快。

如果您知道下拉列表的大概高度，它就像一個魅力一樣，否則您仍然可以使用javascript設置精確的最大高度值。

下面是小例子：DEMO

---

！在這個解決方案中有一個小填充的bug，用解決方案檢查Jacob Stamm的評論。

Answer 9

擴大了答案，這是我的第一個答案，所以如果之前沒有足夠的細節，那麼原諒。

對於Bootstrap 3.x我個人比較喜歡CSS動畫，我一直在使用animate.css &以及Bootstrap Dropdown Javascript Hooks。雖然它可能不具備完全的效果，但它是一種非常靈活的方法。

第1步：到您的網頁添加animate.css與head標籤：

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

第2步：使用標準引導HTML扳機：

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

    <ul class="dropdown-menu"> 
    ... 
    </ul> 
</div> 

步驟3：然後將2個自定義數據屬性添加到dropdrop-menu元素;數據下拉式輸入動畫和數據下拉輸出動畫。這些可以是任何有生命的。像淡入或淡出

CSS效果

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

步驟4：接着添加以下Javascript來讀出的數據，下拉入/出的數據屬性和反應，從而將引導的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步（可選）：如果你想加快或改變您就可以使用下面的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 10

這裏是一個不錯的使用jQuery簡單的解決方案，很好地工作：

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

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

的幻燈片動畫切換髮生在點擊，它總是滑b克服失去焦點。

將300的值更改爲任何您想要的值，數字越小，動畫越快。

編輯：

該解決方案將僅適用於桌面視圖的工作。它需要進一步修改才能很好地顯示移動設備。