动画切换Stairstepped效果的链接

时间:2015-12-04 17:13:27

标签: javascript jquery html css twitter-bootstrap

我尝试使用.each().toggle().fadeToggle()或同等对象来创建“阶梯式”'使用Bootstrap 3在网站上使用JS和jQuery的动画。

我是一个小伙伴:http://jsfiddle.net/JeffroDH/2xcv7cb1/

基本上,当我点击'类别'链接,我喜欢子类别快速连续取消隐藏,但不是同时取消所有,因此它们似乎流出,而不是仅仅作为一个块消失。动画可以是左侧的幻灯片,也可以只是一个幻灯片切换,但我似乎无法让.each(),。delay().fadeToggle()做我想做的事情。

1 个答案:

答案 0 :(得分:0)

你没有在这里展示你的CSS,但我会用一个课来完成这个。例如,在category-dropin-item类中,添加:

max-height:0; 
transition: max-height .2s;

然后,在另一个类中,也许叫做show,添加:

max-height:2em;

(您需要使用该值才能使其正常工作。)然后,在您的JQuery中,当用户单击“类别”链接时,请延迟添加show类。你应该得到一个不错的小转变。