jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

SlideInReplace jQuery Plugin

A jQuery Plugin to replace an element with an other element in a fadeing, sliding animation.

Demo Styling Download Compatibility Changelog


To illustrate what this plugin actually does, we start with a first example that does it the wrong way, we replace the green box with the red box that is already visible, using default settings:

$('#content1').slideInReplace( $('#content2') );

Content 1

Some text

Content 2

Some other text


Now of course you normally don't show the replacement content before the replacement process starts, so do it the right way and hide the replacement with "display:none" as shown in this example:

Content 3

Some text


Or just create the replacing content with jQuery:

var el4b = jQuery('<div/>', {
    id: 'content4b',
    class: 'content orange',
    html: '<h3>Content 4b</h3><p>Some text</p>'

$('#content3b').slideInReplace( el4b );

Content 3b

Some text


Take care with content that isn't the same size:

Content 3c

Some text


The plugin has a good range of options and you can use custom easings (using the popular easing plugin):

	replaceWith: $('#content6'),
	speed: 1000,
	distance: '40px',
	direction: 'right', // currently only right or left
	easing: 'easeOutBounce',

Content 5

Some text


Well, feel free to style your elements however you want, just make sure that the replacement is of the same size and relatively positioned or absolutely positioned, floats won't work correctly.


Current version: jquery.slideinreplace-0.4.js (2.0k not minified)


Tested in: