jQuery 动画 - 平滑的大小过渡 [英] jQuery Animation - Smooth Size Transition

问题描述

所以这可能真的很简单，但我还没有找到任何可以学习的例子，所以请耐心等待.;)

这基本上是我想要做的:

内容丰富！内容丰富！内容丰富！...
....$("div").html("内容有点乱！");

当注入新内容时，我希望在具有大量内容的 div 的维度与具有很少内容的 div 的维度之间平滑地设置动画.

想法?

解决方案

试试这个 jQuery 插件:

//对因改变元素内容而产生的维度变化进行动画处理//用法示例://$("#myElement").showHtml("新的 HTML 内容");//$("div").showHtml("新的 HTML 内容", 400);//$(".className").showHtml("新的 HTML 内容", 400,//function() {/* 完成时 */});(功能($){$.fn.showHtml = 函数(html，速度，回调){返回 this.each(function(){//要修改的元素var el = $(this);//保留宽度和高度的原始值 - 他们需要//在动画中被修改，但可以恢复一次//动画已经完成.var Finish = {width: this.style.width, height: this.style.height};//表示为像素值的原始宽度和高度.//如果这个元素有它的//以像素为单位明确指定的尺寸.当然，如果那样//完成后整个例程毫无意义，因为尺寸//当内容改变时不会改变.var cur = {width: el.width()+'px', height: el.height()+'px'};//修改元素的内容.元素将调整大小.el.html(html);//获取元素的最终尺寸//(初始样式设置仍然有效)var next = {width: el.width()+'px', height: el.height()+'px'};el .css(cur)//恢复初始尺寸.animate(next, speed, function()//动画到最终尺寸{el.css(完成)；//恢复初始样式设置if ( $.isFunction(callback) ) callback();});});};})(jQuery);

评论员 RonLugge 指出，如果您在同一个元素上调用它两次，这可能会导致问题，其中第一个动画在第二个开始之前还没有完成.这是因为第二个动画将当前(中间动画)大小作为所需的结束"值，并继续将它们固定为最终值(有效地停止动画在其轨道上而不是朝着自然"大小进行动画处理)...

解决此问题的最简单方法是调用 stop()在调用 showHtml() 并为第二个 (jumpToEnd) 参数传递 true 之前:

$(selector).showHtml("新的 HTML 内容").stop(真，真).showHtml("甚至更新的内容");

这将导致第一个动画在开始新动画之前立即完成(如果它仍在运行).

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!");

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.

Thoughts?

解决方案

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

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

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 动画 - 平滑的大小过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！