我正在尝试使用 .each()
和 .toggle()
或 .fadeToggle()
或等效项来创建在使用 Bootstrap 3 的网站上使用 JS 和 jQuery 的“阶梯式”动画。
我有一个 jsfiddle:http://jsfiddle.net/JeffroDH/2xcv7cb1/
基本上,当我单击“类别”链接时,我希望子类别快速连续地取消隐藏,但不是同时全部取消隐藏,因此它们看起来像是流出,而不是像 block 一样淡入。动画可能是从左边开始的幻灯片,或者只是一个 fadeToggle,但我似乎无法获得 .each()
、.delay()
和 .fadeToggle()
做我想做的事。
最佳答案
您不会在此处显示您的 CSS,但我会通过一个类来完成此操作。例如,在您的 category-dropin-item 类中,添加:
max-height:0;
transition: max-height .2s;
然后,在另一个类(可能称为 show)中,添加:
max-height:2em;
(您需要尝试使用该值才能使其正常工作。)然后,在您的 JQuery 中,当用户单击 Categories 链接时,延迟添加 show 类。你应该得到一个不错的小下降过渡。
关于javascript - 阶梯效果链接的动画切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34093834/