如何使用jquery在bootstrap的navbar-default和navbar-inverse之间切换淡入淡出

Question

我试图在bootstrap中切换默认/反向导航栏，但我无法在它们之间进行淡入淡出。任何想法？

// toggle default/inverse navbar
$('#inverse-toggle-button').click(function() {
    $('#top-navbar').toggleClass('navbar-inverse navbar-default', 1000);

});

http://jsfiddle.net/waspinator/65WLg/

Answer 1

您可以包含jQuery UI来设置CSS转换动画：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<强> Updated Fiddle

Answer 2

你可以做这样的事情

$('#inverse-toggle-button').click(function() {
    $('#top-navbar').toggleClass('navbar-inverse navbar-default', 1000);
    $('#top-navbar').find("div").toggleClass('navbar-inverse navbar-default', 1000);

});

将过渡应用于#top-navbar

的所有子项