javascript - 阶梯效果链接的动画切换

Question

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

我有一个 jsfiddle:http://jsfiddle.net/JeffroDH/2xcv7cb1/

基本上，当我单击“类别”链接时，我希望子类别快速连续地取消隐藏，但不是同时全部取消隐藏，因此它们看起来像是流出，而不是像 block 一样淡入。动画可能是从左边开始的幻灯片，或者只是一个 fadeToggle，但我似乎无法获得 .each()、.delay() 和 .fadeToggle() 做我想做的事。

Answer 1

您不会在此处显示您的 CSS，但我会通过一个类来完成此操作。例如，在您的 category-dropin-item 类中，添加:

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

然后，在另一个类(可能称为 show)中，添加:

max-height:2em;

(您需要尝试使用该值才能使其正常工作。)然后，在您的 JQuery 中，当用户单击 Categories 链接时，延迟添加 show 类。你应该得到一个不错的小下降过渡。