CODEWITHSUNDEEP
jqueryhtmlcssflexbox
Steve
Steve

Reputation: 3080

slideDown animation for flexbox

Ok So I am trying to recreate the "slideUp" and "slideDown" functionality in jquery but when a flexbox is used for its display!

jQuery.fn.toggleFlexbox = function() {
    var elm = $(this[0]);
    if(elm.css('display') === "none"){
        elm.css('display', '-webkit-flex');
    }else{
        elm.slideUp('fast');
    }
};

This is how far I have got (currently above code works but doesn't slide when we toggle from "none" to "-webkit-flex" with it, I tried the following)

elm.animate({"display":"-webkit-flex"}, 1000);

This simply fails to work, doesn't animate, doesn't error or anything...

Oddly Im doing this because if I start the page with all my objects (elements with class "Settings") I want to load as display flex, then hide them with 

$('.settings').hide();

This seems to not apply the flexbox when I click to slidedown the Settings section but I've gone to another page and come back it when behaviours correctly... very odd!

Oddly enough I cannot recreate it in fiddler.... http://jsfiddle.net/FzqA7/ ..

Upvotes: 2

Views: 3922

Answers (1)

monners
monners

Reputation: 5302

If I'm understanding your question correctly (which is a BIG if), it sounds like you've got the same problem I was struggling with a while ago, i.e., only half of the animation would work once initiated (once slid down, slideUp wouldn't work, vice versa).

I got around it by adding "return" after the first iteration of the animation, although this was a click event trigger so ending the function was crucial to multiple permutations.

Try:

    jQuery.fn.toggleFlexbox = function() {
        var elm = $(this[0]);
        if(elm.css('display') === "none"){
            elm.css('display', '-webkit-flex');
            return;
        }else{
            elm.slideUp('fast');
            return;
        }
    };

Sorry if I'm completely misunderstanding your question, but it's a little ambiguous....

Upvotes: 1

Related Questions