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动画仅在我使用调试器单步执行时播放。似乎在类被切换时（动画在侧面过滤器类，并且通过应用fc-hidden类来改变高度），该函数还没有意识到过滤器的高度，因此，不知道如何动画。如果我一步一步地完成它，那就完美了。

想法？

Answer 1

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

另外，要警惕执行函数和Bootstrap自身加载之间的竞争条件

Answer 2

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

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

这比我试图做的更清晰。

Jquery动画仅在我逐步使用调试器时才起作用

2 个答案: