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

标签 javascript jquery html css twitter-bootstrap

我正在尝试使用 .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/

相关文章:

jquery - CSS 样式的列根据子元素的数量移动垂直位置

javascript - 将对象从 popup.js 发送到本地 html 页面

javascript - Redux 操作错误必须是普通对象

javascript - 如何检查具有类的元素是否是该类的第一个子元素

javascript - 如何在服务器上为 jQuery/uploadify 获取文件创建日期?

javascript - 使用javascript保存html页面

javascript - Bootstrap 下拉菜单不会响应

javascript - 完成后序列不重置

javascript - 网页上的 NightmareJS 输出

jquery - 在 Python 的 Bottle 中使用 jQuery AJAX