Fade transit dynamically updated DOM content using jQuery

This jQuery plugin originated from smooth transition requirements in the live module. Earlier that module would do immediate replacement of existing dynamic content/comment preview with the updated preview.

That, however, did not look nice for a so so neat module. Neither did fadeOut() and fadeIn() stand good. Since there would be a gap between them i.e. there would be a transition among three items: from Preview 1 to background to Preview 2, unlike transition from Preview 1 to Preview 2.

I found innerFade quite like the thing I needed, but it would require extra touch since my requirements were dynamic content updating. Later, I also discovered the Cycle plugin.

I have named this plugin fadeTransition, since it does what it's name says. And it is not so generic for some cases. Moreover, it's just 2.2 KB in size, as compared to innerFade (5 KB) and Cycle Lite Plugin (3 KB when minified).

Usage

1. Be ready with the HTML elements in DOM
   

   var box = '<div id="live-preview-container">
     <div id="live-comment-preview"></div>
     <div id="live-comment-preview-background"></div>
   </div>';
   $(box).appendTo('#comment_form');

2. Then use it like the sample from live module's usage:
   

   var comment_div = $("div#live-comment-preview");
   var comment_div_background = $('div#live-comment-preview-background');

   Execute the following for each dynamic content updating.
   

   $('div#live-preview-container').slideDown().fadeTransition({
     html:     data['html'], // Content.
     first:    comment_div,
     second:   comment_div_background,
     speed:    'normal',
     timeout:  100,
   });

Transition's inside stratagem

• Upon first call, comment_div stores the html data and previews with a fadeIn + slideDown effect.
• On the 2nd call, comment_div_background (which is currently behind comment_div using z-index CSS property) stores updated html data. Then comment_div_background is set to fadeIn() and comment_div to fadeOut(). Now the comment_div is actually in the background and the other in the foreground.
• On further calls, it cycles between comment_div and comment_div_background the same way as the 2nd call.

Demo

Right here, type in a comment and halt for a second to see the preview. Repeat the same with further comment.. Yes! That's where this plugin is put in use! The Live module for Drupal.

[Edit: some discussions would be fun, rather than some random letters ]

[Edit 2: Unpublished all test comments. They are still open for anyone to test though. I'll just not publish them. Have fun.]

Download