javascript - Twitter bootstrap 2.1.1 打开可折叠时折叠不动画

标签 javascript jquery html css twitter-bootstrap

我正在尝试创建一个简单的按钮来打开/关闭我在 Twitter Bootstrap 中实现的网站的可折叠部分。我想使用可折叠的 javascript 插件,但它似乎不能正常工作:折叠动画发生在“关闭时”,但“打开时”是瞬时的。

这是一个演示该问题的 jsFiddle。

http://jsfiddle.net/whUvL/2/

在我的导航器(Mac 上的 Chrome 22.0.1229.94)上,第一次单击按钮时,h2 会立即“弹出”。再次单击按钮“折叠”带有漂亮动画的 h2。再次单击“显示它”很快。

如何让动画在“打开时”和“关闭时”工作?我应该添加更多 html/css,还是更改一些 js?

另外,我注意到 jquery 1.8.2 和最新的 twitter boostrap 会发生这种情况。使用 jquery 1.7.2 和 bootstrap 2.0.2 it seems to work just fine .如果可能,我想使用两者中的最新版本。

最佳答案

好的,我找到问题了。这是right there in the docs :

  • Requires the Transitions plugin to be included.

在我的辩护中,我必须说那部分是灰色的,作为一项要求并不是很明显。

一旦我包含了转换模块,动画又开始工作了:

http://jsfiddle.net/whUvL/4/

感谢@funzionpro,他让我走上了正确的轨道 - 一旦我知道包括它工作的完整 javascript 集,其余的就很容易推断出来了。

(我将在两天内将此答案标记为正确,在此之前我必须将其打开,因为 SO 关于自动回复的政策)

关于javascript - Twitter bootstrap 2.1.1 打开可折叠时折叠不动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12952480/

相关文章:

javascript - jQuery 克隆列表项在使用each() 函数时都获得相同的文本值

html - 如何对齐具有对 Angular 线边缘的 div 背景图像?

html - 如何在 bootstrap 4 中创建响应式文本?

javascript - 通过 document.write() 添加一个简单的静态 <style> 标签的原因是什么?

javascript - 比较2个句子并获取不同单词的索引

javascript - 将选择选项附加到文本字段

javascript - 如何取消父复选框

javascript - jQuery 通过类名获取 ID

jQuery 对象 : to cache or not to cache?

javascript - 使用 jQuery 向下滑动一个 div,向上滑动其他可见的 div(基于内容的滑动导航)