jQuery动画-平滑大小转换

所以这可能很简单，但我还没有找到任何可以学习的例子，所以请耐心听我说

以下是我想做的：

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

.... 

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

内容丰富！很多内容！很多内容。。。
.... 
$（“div”）.html（“它的一点点内容！”）；

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

---

想法？

也许是这样的

$(".testLink").click(function(event) {
    event.preventDefault();
    $(".testDiv").hide(400,function(event) {
        $(this).html("Itsy-bitsy bit of content!").show(400);
    });
});

接近我认为您想要的，也可以尝试slideIn/slideOut或查看UI/Effects插件。

您可以使用

---

你好，meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt

---

您可以使用设置为绝对宽度值的“外部div”包装“content div”。使用“hide（）”或“animate（{width}）”方法注入新内容，如其他答案所示。这样，页面就不会在两者之间回流，因为包装器div保持稳定的宽度。

试试这个jQuery插件：

// 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指出，如果在同一个元素上调用两次，第一个动画在第二个动画开始之前还没有完成，那么这可能会导致问题。这是因为第二个动画将当前（中间动画）大小作为所需的“结束”值，并继续将其固定为最终值（有效地停止动画的轨迹，而不是朝“自然”大小设置动画）

解决此问题的最简单方法是在调用

showHtml（）

之前调用，并为第二个（jumpToEnd）参数传递

true

：

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

---

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

以下是我如何修复的，我希望这会有用！ 动画100%平滑：）

HTML:

这里有一些内容

Javascript:

// cache selectors for better performance
var container = $('#div-1'),
    wrapper = $('#div-2');

// temporarily fix the outer div's width
container.css({width: wrapper.width()});
// fade opacity of inner div - use opacity because we cannot get the width or height of an element with display set to none
wrapper.fadeTo('slow', 0, function(){
    // change the div content
    container.html("<div id=\"2\" style=\"display: none;\">new content (with a new width)</div>");
    // give the outer div the same width as the inner div with a smooth animation
    container.animate({width: wrapper.width()}, function(){
        // show the inner div
        wrapper.fadeTo('slow', 1);
    });
});

//缓存选择器以获得更好的性能
变量容器=$（“#div-1”），
包装器=$（“#div-2”）；
//暂时固定外部div的宽度
css（{width:wrapper.width（）}）；
//内部div的淡入不透明度-使用不透明度，因为我们无法获得显示设置为“无”的元素的宽度或高度
fadeTo（'slow'，0，function（））{
//更改div内容
html（“新内容（具有新宽度）”；
//使用平滑动画使外部div与内部div具有相同的宽度
animate（{width:wrapper.width（）}，function（））{
//显示内部div
fadeTo（'slow'，1）；
});
});

---

我的代码可能会有一个较短的版本，但我就是这样保存的。

这对我来说就行了。还可以向临时div添加宽度

$('div#to-transition').wrap( '<div id="tmp"></div>' );
$('div#tmp').css( { height: $('div#to-transition').outerHeight() + 'px' } );
$('div#to-transition').fadeOut('fast', function() {
  $(this).html(new_html);
  $('div#tmp').animate( { height: $(this).outerHeight() + 'px' }, 'fast' );
  $(this).fadeIn('fast', function() {
    $(this).unwrap();
  });
});

$（'div#to transition'）。换行（“”）；
$（'div#tmp'）.css（{height:$（'div#to transition'）.outerHeight（）+'px'）；
$（'div#to transition'）.fadeOut（'fast'，function（）{
$（this）.html（新的html）；
$（'div#tmp'）。动画（{height:$（this）.outerHeight（）+'px'}，'fast'）；
$（this.fadeIn（'fast'，function（））{
$（this.unwrap（）；
});
});

您可以使用

dequeue

平滑jQuery动画。在开始新动画之前，测试类是否存在（在悬停时设置，在mouseOut animate回调时删除）。当新动画确实开始时，退出队列

演示设置为5个全高列，单击第2列到第5列中的任何一列将设置其他3列的切换宽度动画，并将单击的元素移到最左侧

---

为了利用jquery插件解决方案（声誉太低，无法将其添加为注释），jquery.html（）将删除附加html上的任何事件处理程序。更改：

// Modify the element's contents. Element will resize.
el.html(html);

到

---

将保留“html”元素的事件处理程序

这与我的想法不太一样。这样，Div在再次扩展之前收缩为零。我想消除中间的收缩，这样它就可以直接进入新的维度，而不会在两者之间出现零值。这有意义吗？UI/Effects的演示似乎也没有做到这一点。finish变量的意义是什么？它与cur有何不同？@ecoffey:

finish

保存

宽度

和

高度

样式的初始值和最终值。它将始终不同于

cur

，后者表示将元素固定在初始宽度和高度所需的样式；如果它们是相同的，那么元素的尺寸就不会随内容而改变，而这个动画将毫无意义！你应该还这个。each@Ron：如果您连续触发两个动画，它们可能会相互干扰。。。我不相信我已经演示过了，但是如果您确实希望使用加载动画，则需要对进行干预调用。@Ron:您需要将第二个参数的true传递给

stop（）

，从而强制当前动画实际完成（而不仅仅是停止）。我已经用细节更新了答案。我从来没有想到在fadeOut成功事件中使用fadeIn，谢谢！这实际上是一个回电，而不是一个成功的事件！我刚刚添加了

$（“div”）.stop（true，true）在调用您的语句之前，确保动画未排队。
$('div#to-transition').wrap( '<div id="tmp"></div>' );
$('div#tmp').css( { height: $('div#to-transition').outerHeight() + 'px' } );
$('div#to-transition').fadeOut('fast', function() {
  $(this).html(new_html);
  $('div#tmp').animate( { height: $(this).outerHeight() + 'px' }, 'fast' );
  $(this).fadeIn('fast', function() {
    $(this).unwrap();
  });
});

var space = ($(window).width() - 100);
$('.column').width(space/4);

$(".column").click(function(){
    if (!$(this).hasClass('animated')) {
        $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'}, 1750,'linear', function () {});
    }

  $(this).addClass('animated');
    $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'}, 1750,'linear', function () {
          $(this).removeClass('animated').dequeue();

      });
    $(this).dequeue().stop().animate({
        width:(space/4)
    }, 1400,'linear',function(){
      $(this).html('AGAIN');
    });
});

// Modify the element's contents. Element will resize.
el.html(html);

// Modify the element's contents. Element will resize.
el.append(html);