jQueryanimation – 平滑的大小过渡
所以这可能很简单，但是我还没有find任何学习的例子，请耐心等待。 ;）
这基本上是我想要做的：
<div>Lots of content! Lots of content! Lots of content! ...</div> .... $("div").html("Itsy-bitsy bit of content!"); 我希望在div的尺寸与div的尺寸之间有很多内容的平滑animation。
思考？
试试这个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指出，如果在相同的元素上调用两次，第一次animation在第二次开始之前还没有完成，这可能会导致问题。 这是因为第二个animation会将当前（中等animation）尺寸作为所需的“结束”值，并将其作为最终值进行修复（有效地停止animation的轨迹，而不是向“自然”尺寸animation）…
解决此问题的最简单方法是在调用showHtml()之前调用showHtml() ，并为第二个（ jumpToEnd ）parameter passingtrue ：
$(selector).showHtml("new HTML contents") .stop(true, true) .showHtml("even newer contents");
这将导致第一个animation立即完成（如果它仍在运行），在开始一个新的animation之前。
您可以使用animation方法 。
$("div").animate({width:"200px"},400);
也许这样的事情？
$(".testLink").click(function(event) { event.preventDefault(); $(".testDiv").hide(400,function(event) { $(this).html("Itsy-bitsy bit of content!").show(400); }); });
接近我认为你想要的，也试试slideIn / slideOut或看看UI /效果插件。
这是我如何解决这个问题，我希望这将是有用的！ animation是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); }); });
有可能是我的代码更短的版本，但我只是保持这样。
这为我做了这份工作。 您也可以添加一个宽度的临时股利。
$('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(); }); });
你好meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt。
你可以用'外部div'来包装'content div'，它被设置为绝对宽度值。 用其他答案中显示的“hide（）”或“animate（{width}）”方法注入新内容。 这样，页面之间不会重排，因为包装div保持稳定的宽度。
您可以使用dequeue来平滑jQueryanimation。 testing类的存在（设置hover和删除mouseOutanimationcallback）之前凝视新的animation。 当新的animation开始时，退出。
这是一个快速演示。
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列中的任何一列都会animation另一个3的切换宽度，并将单击的元素移动到最左侧。
为了捎带jQuery插件解决scheme（声誉太低，将其添加为注释），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”元素的事件处理程序
