添加'hidden'类时，使bootstrap div淡出

Question

我正在使用Bootstrap for css，当“隐藏”类被切换时，我需要帮助淡出div。

我的网站结构非常简单：有3个主要的容器div：搜索，等待和显示。 从本质上讲，show是排名最低的一个，等待显示在顶部，搜索位于最顶层。

我需要的是搜索在Jquery事件被触发时淡出超过3秒：

    $('.search').toggleClass('hidden');

我不希望它立即消失。 与wait div相同。 我试过用

    $(".searchBar").fadeOut("slow", function() {
        $('.searchBar').toggleClass('hidden');
    });

但它不起作用。 淡出/淡化似乎没有任何明显的效果。 由于隐藏类已经在引导程序中，我不想创建另一个自定义类; 必须有办法实现这一目标。

Answer 1

使用这样的东西：

$(".searchBar").fadeOut("slow", function() {
    $('.searchBar').addClass('hidden').show(0);
});

Answer 2

Bootstrap隐藏类是：

.hidden {
  display: none;
  visibility: hidden;
} 

您可以轻松实现此目的：

$('.searchBar').toggle( "slow");