jQuery的动画 - 平滑过渡大小

问题描述

所以这可能是很简单，但我一直没能找到任何例子来学习过的还，所以请多多包涵。 ;）

So this might be really simple, but I haven't been able to find any examples to learn off of yet, so please bear with me. ;)

这里的基本上是我想做的事：

Here's basically what I want to do:

<div>Lots of content! Lots of content! Lots of content! ...</div>

....

$("div").html("Itsy-bitsy bit of content!");

我希望在新的内容注入有很多内容的div很少尺寸的div维度之间顺利动画。

I want to smoothly animate between the dimensions of the div with lots of content to the dimensions of the div with very little when the new content is injected.

思考？

推荐答案

试试这个jQuery插件：

Try this jQuery plugin:

// 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);

注释器RonLugge指出，如果你把它的两倍相同的元件（多个），其中第二开始之前所述第一动画尚未完成在此可能会导致问题。这是因为第二个动画将采取电流（中期动画）大小为所需的收官的价值观，并着手解决这些问题的最终值（有效地停止在其轨道上的动画，而不是向自然大小动画）...

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

要解决这个最简单的方法是调用 停止（） 之前调用 showHtml（），并通过真正第二（的 jumpToEnd 的）参数

The easiest way to resolve this is to call stop() before calling showHtml(), and passing true for the second (jumpToEnd) parameter:

$(selector).showHtml("new HTML contents")
           .stop(true, true)
           .showHtml("even newer contents");

这将导致第一个动画立即完成（如果它仍在运行），开始一个新的了。

This will cause the first animation to complete immediately (if it is still running), before beginning a new one.

这篇关于jQuery的动画 - 平滑过渡大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！