jQuery动画 - 平滑大小过渡

Question

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

这基本上就是我想做的事情:

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

.... 

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

我希望在div的维度之间平滑地制作动画,其中包含大量内容到div的维度,并且在注入新内容时很少.

思考？

Answer 1

试试这个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(),并传递true第二个(jumpToEnd)参数:

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

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

Answer 2

您可以使用animate方法.

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

Answer 3

也许是这样的？

$(".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 4

这是我如何修复这个,我希望这将是有用的!动画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);
    });
});

我的代码可能有一个较短的版本,但我保持这样.