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

时间:2012-10-18 10:25:07

标签: 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。如果可能的话,我想使用最新的两种。

2 个答案:

答案 0 :(得分:4)

好的,我发现了问题。这是right there in the docs

  
      
  • 需要包含Transitions插件。
  •   

在我的辩护中,我必须说那部分是灰色的,并不是非常明显的要求。

一旦我加入了过渡模块,动画就会重新开始工作:

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

感谢@funzionpro,他让我走上了正确的轨道 - 一旦我知道包括完整的javascripts,其余的很容易推断。

(我会在两天内将此答案标记为正确,直到那时我必须保持开放,因为有关自动回复的SO政策)

答案 1 :(得分:1)

如果你添加2.1.1

的bootstrap.js似乎工作正常

工作小提琴:http://jsfiddle.net/whUvL/3/