Javascript 如何更改引导选项卡淡出速度？

我正在尝试改变引导中淡入淡出效果的速度。我使用css找到了这个答案：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.褪色{
不透明度：0；
-webkit过渡：不透明度1.5s线性；
-moz过渡：不透明度1.5s线性；
-ms转换：不透明度1.5s线性；
-o-过渡：不透明度1.5s线性；
过渡：不透明度1.5s线性；
}

一个
两个
三
就是这个
这是两个
这是三个

没有淡出时间，使元素可见的类将被删除

要使其淡出，必须确保该项不会从dom（HTML文档）中删除，而是使其不可见，以便淡出

下面是一个例子，根据您的愿望进行调整：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.选项卡内容{
位置：相对位置；
}
.tab内容>.tab窗格{
/*为了确保元素正确就位
使用位置：绝对位置*/
位置：绝对位置；
排名：0；
}
.褪色{
不透明度：0；
-webkit过渡：不透明度1.5s线性；
-moz过渡：不透明度1.5s线性；
-ms转换：不透明度1.5s线性；
-o-过渡：不透明度1.5s线性；
过渡：不透明度1.5s线性；
}
.tab内容>.tab窗格：非（.in）{
/*display:none；是默认行为，使其显示为：block*/
显示：块；
/*使不透明度为0，这是过渡的响应*/
不透明度：0；
}

一个
两个
三
就是这个
这是两个
这是三个

问题在于，当某个项目未激活时，它的

display

属性设置为

display:none

，因此在应用任何动画之前将被隐藏。如果使用绝对位置重叠来定位所有对象，则可以将显示保留为

display:block

，只需更改不透明度：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.褪色{
不透明度：0；
-webkit过渡：不透明度1.5s线性；
-moz过渡：不透明度1.5s线性；
-ms转换：不透明度1.5s线性；
-o-过渡：不透明度1.5s线性；
过渡：不透明度1.5s线性；
}
.选项卡内容{
位置：相对位置；
}
.tab内容>.tab窗格{
排名：0；
位置：绝对位置；
显示：块；
}
.tab内容>.tab窗格：非（.active）{
不透明度：0；
}

一个
两个
三
就是这个
这是两个
这是三个

如果您只是想避免淡入淡出效果，或者需要快速显示选项卡，请删除淡入淡出类

//原创的

<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

就是这个
这是两个
这是三个

//更新

<div class="tab-content">
  <div id="one" class="tab-pane in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

就是这个
这是两个
这是三个

---

淡入淡出类仅应用于第一个窗格，然后单击按钮时，Jquery将删除活动类和淡入淡出类，并将其应用于相应的窗格。

如果您单击它，您可以使所有内容都有趣地消失。对于答案，tnx的工作方式与我所希望的一样。我只是很惊讶，没有更多的淡入淡出/滑动/任何效果。另外，这可以用javascript/jQuery实现吗？它必须有一个定义的类切换时间。（很抱歉打扰，我刚刚开始学习js）@fpiskur这里有一个超时的例子：