0

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.

Blake Rivell
  • 13,105
  • 31
  • 115
  • 231

1 Answers1

1

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
Lucas
  • 100
  • 12
  • This looks good, but can you show me how I can do this when adding the class col-md-12? I know in jQuery UI I can simply do .addClass("col-md-12", 1000). I just tried your example and my element slides off of the page, but the slide effect is perfect. – Blake Rivell Mar 03 '16 at 14:49
  • Also take a look at the doc: [http://api.jquery.com/animate/](http://api.jquery.com/animate/). Refering to this [post](http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles) it is only possible with JQueryUI library to animate an added CSS class – Lucas Mar 03 '16 at 14:56