Jquery animation only working when I step through using debugger

Question

I have a function that hides or shows a filter:

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");

}

for some reason, the css animation on the height only plays when i step through it using the debugger. It seems as if by the time the class is toggled (animation is on the side filter class, and height is changed through application of fc-hidden class), the function is not yet aware of the height of the filter, and thus, does not know how to animate. If i do it step by step, it works perfectly.

Ideas?

brandon-barnett · Accepted Answer · 2015-05-27 18:34:13Z

1

Try using the built-in events in Bootstrap instead: http://getbootstrap.com/javascript/#collapse-events or http://getbootstrap.com/javascript/#carousel-events, depending on what you're using. It might work better if you use their native events instead of handling it yourself.

Also, be wary of a race condition between executing your function and Bootstrap's own load

answered May 27, 2015 at 18:34

brandon-barnett

1,10510 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abarnett · Accepted Answer · 2015-05-27 18:33:39Z

0

It seems that most of this can be avoided by just using bootstrap's collapse functionality.

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

It's a much cleaner solution than what I was trying to do.

answered May 27, 2015 at 18:33

Abarnett

3272 gold badges5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Jquery animation only working when I step through using debugger

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related