jquery plugin for html() effect manipilation

jQuery currently offers .html() method which simply replaces html code on given element. When this happens, the old html code is removed as a whole and new html code is added.

My replacement HTML will be very similar like the previous one and I need visual effects for the user so he can disappearing parts which should be removed and appearing parts which should be added.

So I need you to write a jQuery plugin, which will do similar task, but differently. It be called .updateHtml() and it will compare the old html and new html, and it will remove and add the elements not by using the .html() function but by removing and appending only the differences.

My goal is to be able to attach effects to removal and adding of the elements. For example, if the old HTML has two TABLEs in it with two rows each, and the new HTML has the same two TABLEs but first has now 3 rows (a row added at position 2) and second only 1 row, the jQuery plugin's .updateHtml() function will recognize this and it will do the following:

- it will add the missing row inbetween the first and second table rows in first table, then it will remember the current height, and it will set opacity and height to 0. Then it will animate opacity from 0 to 1 and height from 0 to the necessary height on the newly added row so it appears with animation.

- it will animate opacity from 1 to 0 on the row from the second table, and height from current height to 0, and then it will remove() the elements after the animation is finished.

- if the elements are the same on both old HTML and new HTML, it ensures that styles, class names, and other attrubudes are transfered from the new html to the old elements. For example, if there was div class=aa tag in old html, but div class=bb on new html, it will ensure the result is the original div tag but with new class=bb.

Syntax will be following:

.updateHtml(newHTML [string], animationDuration [integer])

JavaScript jQuery / Prototype

Project ID: #8241803

About the project