Jquery 动画仅在我逐步使用调试器时才有效答案

【问题标题】：Jquery animation only working when I step through using debuggerJquery 动画仅在我逐步使用调试器时才有效
【发布时间】：2015-05-27 18:19:43
【问题描述】：

我有一个隐藏或显示过滤器的功能：

function slide(event) {
    //a search engine filter
    var $sideFilter = $(event.currentTarget).prev();
    //an arrow that switches its orientation based on collapsed or not
    var $arrow = $(event.currentTarget).find(".arrow");

    //if not hidden, find current height of element (is variable height)
    if (!$sideFilter.hasClass("fc-hidden")) {
        var currentHeight = $sideFilter.height();
        //set it so that animation has concrete height to go from/to
        $sideFilter.css("height", currentHeight.toString());
    }

    $sideFilter.toggleClass("fc-hidden");
    $arrow.toggleClass(".arrow-rotated");

    //set height back so that it can be variable
    $sideFilter.css("height", "auto");

}

由于某种原因，高度上的 css 动画只有在我使用调试器单步执行时才会播放。似乎在切换类时（动画在侧过滤器类上，并且通过应用 fc-hidden 类更改高度），该函数还没有意识到过滤器的高度，因此，不知道怎么做动画。如果我一步一步地做，它就完美了。

想法？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

尝试改用 Bootstrap 中的内置事件：http://getbootstrap.com/javascript/#collapse-events 或 http://getbootstrap.com/javascript/#carousel-events，具体取决于您使用的内容。如果您使用他们的原生事件而不是自己处理它可能会更好。

另外，请注意执行您的函数和 Bootstrap 自己的负载之间的竞争条件

【讨论】：

【解决方案2】：

似乎大多数情况都可以通过使用引导程序的折叠功能来避免。

http://getbootstrap.com/javascript/#collapse

这是一个比我尝试做的更清洁的解决方案。

【讨论】：