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

Question

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

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 动画仅在我使用调试器单步执行时播放。似乎在切换 class 时（动画在侧面过滤器 class 上，并且通过应用 fc-hidden class 更改高度），功能还没有知道过滤器的高度，因此不知道如何设置动画。如果我一步一步做，它会完美地工作。

想法？

Answer 1

似乎只要使用 bootstrap 的折叠功能就可以避免大部分问题。

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

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

Answer 2

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

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

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

Jquery animation only working when I step through using debugger

jquery

jquery-animate