CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Blake Rivell
Blake Rivell

Reputation: 13875

jQuery transition effect when hiding 3 columns and expanding one to be 100% of row

My page initially starts out with 4 wrapper divs that each have a class of 'col-md-3' but after an expand button is clicked 3 of the wrappers are hidden and the clicked one gets 'col-md-12':

// If wrapper is the current wrapper expand to col-md-12 otherwise hide
    $(".wrapper").each(function (index) {
        if ($(this).attr("id") === wrapper.attr("id")) {
            $(this).removeClass("col-md-3").addClass("col-md-12");
        } else {
            $(this).hide();
        }
    });

Is there any fast/easy way to animate something like this? I prefer not adding jQuery UI library to my project. I prefer a slide left to right motion.

The only thing I could come up with so far is doing:

$(this).hide('1000');

However, I prefer doing the animation on the adding of class "col-md-12" not the hiding of the others.

Upvotes: 0

Views: 146

Answers (1)

Lucas
Lucas

Reputation: 100

I prefer a slide left to right motion.

In JQuery you can animate Elements with

$(this).stop().animate({
    right: '-50%'         //distance of moving
}, 400);                 //time of moving in ms

Upvotes: 1

Related Questions