jQuery 动画 - 平滑大小过渡

Question

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

这基本上就是我想要做的：

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

.... 

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

当注入新内容时，我希望在内容较多的 div 尺寸和内容很少的 div 尺寸之间平滑地进行动画处理。

想法？

Answer 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();
  });
});

Answer 2

你好，meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt。

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

Answer 3

您可以使用 dequeue 平滑 jQuery 动画。 在开始新动画之前测试类的存在（在悬停时设置并在 mouseOut 动画回调中删除）。 当新动画开始时，出队。

这是一个快速演示。

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

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

Answer 4

为了搭载 jquery 插件解决方案（声誉太低，无法将其添加为评论），jQuery.html() 将删除附加 html 上的任何事件处理程序。 更改：

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

将

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

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

Answer 5

尝试这个 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 指出，如果您在同一个元素上调用它两次，这可能会导致问题，其中第一个动画在第二个动画开始之前尚未完成。 这是因为第二个动画将把当前（动画中间）大小作为所需的“结束”值，并继续将它们修复为最终值（有效地停止动画的轨道，而不是朝着“自然”大小进行动画处理） ）...

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

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

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

Answer 6

您可以使用动画方法。

$("div").animate({width:"200px"},400);

Answer 7

也许是这样的？

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

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

Answer 8

这是我解决这个问题的方法，我希望这会有用！
动画 100% 流畅:)

HTML:

<div id="div-1"><div id="div-2">Some content here</div></div>

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

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