JQuery Replace Element w/ Slide Left Effect

Question

Currently im using fadeOut animation effect in replace content of a div element.

$('#divID').fadeOut('slow', function(){
    $(this).replaceWith( $div );
});

How can I achieve slide to left effect when replace content of the div element?

Answer 1

Don't know if there is a specific effect for that, I used $().animate({left: val}) to achieve that.

var width = $(window).width();

$('#divID').animate({left : -width}, 500, function(){ $div.hide() });
$div.css({left: width}).show().animate({left: 0}, 500);

You will need to set your elements' css to position: absolute, and tune the containers and other items.

Here is a jsfiddle