StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try this jQuery plugin:</p> <pre><code>// Animates the dimensional changes resulting from altering element contents // Usage examples: // $("#myElement").showHtml("new HTML contents"); // $("div").showHtml("new HTML contents", 400); // $(".className").showHtml("new HTML contents", 400, // function() {/* on completion */}); (function($) { $.fn.showHtml = function(html, speed, callback) { return this.each(function() { // The element to be modified var el = $(this); // Preserve the original values of width and height - they'll need // to be modified during the animation, but can be restored once // the animation has completed. var finish = {width: this.style.width, height: this.style.height}; // The original width and height represented as pixel values. // These will only be the same as `finish` if this element had its // dimensions specified explicitly and in pixels. Of course, if that // was done then this entire routine is pointless, as the dimensions // won't change when the content is changed. var cur = {width: el.width()+'px', height: el.height()+'px'}; // Modify the element's contents. Element will resize. el.html(html); // Capture the final dimensions of the element // (with initial style settings still in effect) var next = {width: el.width()+'px', height: el.height()+'px'}; el .css(cur) // restore initial dimensions .animate(next, speed, function() // animate to final dimensions { el.css(finish); // restore initial style settings if ( $.isFunction(callback) ) callback(); }); }); }; })(jQuery); </code></pre> <p>Commenter RonLugge points out that this can cause problems if you call it twice on the same element(s), where the first animation hasn't finished before the second begins. This is because the second animation will take the current (mid-animation) sizes as the desired "ending" values, and proceed to fix them as the final values (effectively stopping the animation in its tracks rather than animating toward the "natural" size)...</p> <p>The easiest way to resolve this is to call <a href="http://api.jquery.com/stop/" rel="noreferrer"><code>stop()</code></a> before calling <code>showHtml()</code>, and passing <code>true</code> for the second (<em>jumpToEnd</em>) parameter:</p> <pre><code>$(selector).showHtml("new HTML contents") .stop(true, true) .showHtml("even newer contents"); </code></pre> <p>This will cause the first animation to complete immediately (if it is still running), before beginning a new one.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload