Css Animate Both .fadeout() And Width

i have multiple div elements next to each other using float:left. Now, when some of the div elements gets hidden by jQuery using fadeOut(), I want the rest of the divs to animate t

Solution 1:

You need to use animate() to bring both the width AND the opacity to 0. Here's a jsFiddle

$(document).ready(function () {

    $('.MyClass').click(function () {

        $(this).animate({'width': 0, 'opacity': 0}, 2000, 
                        function () {$(this).hide(); });
    });
});

Solution 2:

Did you try adding CSS transtions to your divs?

Something like this should do the trick.

div {
      transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out; /* For IE */
}

With whatever effect or timing.

Solution 3:

On click, you can set the background color to transparent so that it doesn't show up, and then animate the div's width down to 0px. After the animation completes, hide it so it still exists in the DOM if you wanted to do something else with it later:

$('.container div').on('click', function(){
    $(this).css({
        'background-color':'transparent'
    }).animate({'width':'0px'}, 400, 'linear', function(){
        $(this).fadeOut();
    });
});

check out the jsfiddle: http://jsfiddle.net/jjdMN/1/