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

SlideInReplace jQuery Plugin

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

Demo Styling Download Compatibility Changelog

Demo

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):

$('#content5').slideInReplace({ 
	replaceWith: $('#content6'),
	speed: 1000,
	distance: '40px',
	direction: 'right', // currently only right or left
	easing: 'easeOutBounce',
});

Content 5

Some text

Styling

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.

Download

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

Compatibility

Tested in:

With:

Changelog