JQuery的replace淡入/animation
我知道有很多关于replace的问题，但似乎没有答案适用于我的情况。
html： <div id="foo"></div>
我希望#foo被淡出，然后我想用淡淡的东西来replace整个东西（不仅仅是内容）。
谢谢
$('#foo').fadeOut("slow", function(){ var div = $("<div id='foo'>test2</div>").hide(); $(this).replaceWith(div); $('#foo').fadeIn("slow"); });
jsfiddle – http://jsfiddle.net/9Dubr/1/
更新为正确淡入
$('#foo').fadeOut("slow", function(){ $('#foo').html(data); $('#foo').fadeIn("slow"); }
我成功地使用这种模式来获取+ fadeOut + fadeIn（与jQuery 1.11.0）：
$.get(url).done(function(data) { $target.fadeOut(function() { $target.replaceWith(function() { return $(data).hide().fadeIn(); }); }); });
$target是要replace的元素。
这个版本将'生活';）
jsfiddle努力
理查德·道尔顿的答案是正确的，是有用的。
如果其他人正在寻求解决一个非常相似的情况，但有更多的内容被更新，以下为我工作。 我的例子包括“响应”，这是一个Ajax返回的HTML堆。
$('.foo').fadeOut("slow", function() { var div = jQuery('<div style="display:none;" class="foo">'+response+'</div>'); $('.foo').replaceWith(div); $('.foo').fadeIn("slow"); });
.hide（）需要更改的原因是它将其应用于响应中的所有元素。 可能比这更优雅的解决scheme，但它的工作原理。
您也可以使用James Padolsey编写的shuffle函数进行一些修改：
(function($){ $.fn.shuffle = function() { var allElems = this.get(), getRandom = function(max) { return Math.floor(Math.random() * max); }, shuffled = $.map(allElems, function(){ var random = getRandom(allElems.length), randEl = $(allElems[random]).clone(true)[0]; allElems.splice(random, 1); return randEl; }); this.each(function(i){ $(this).fadeOut(700, function(){ $(this).replaceWith($(shuffled[i])); $(shuffled[i]).fadeIn(700); }); }); return $(shuffled); }; })(jQuery);
然后在你的处理程序中使用$（'。albums .album'）。shuffle（）; 淡化你的元素。
我写了一个jQuery插件来处理这个。
它允许可以传递replace元素的callback函数。
$('#old').replaceWithFade(replacementElementSelectorHtmlEtc,function(replacement){ replacement.animate({ "left": "+=50px" }, "slow" ); });
该插件
(function($){ $.fn.replaceWithFade = function(el, callback){ numArgs = arguments.length; this.each(function(){ var replacement = $(el).hide(); $(this).fadeOut(function(){ $(this).replaceWith(replacement); replacement.fadeIn(function(){ if(numArgs == 2){ callback.call(this, replacement); } }); }); }); } }(jQuery));
较小的代码，这对我有用：
$jq('#taggin').replaceWith($jq('#rotator')); $jq('#rotator').fadeIn("slow").show();
用msreplace“slow”（例如2000）
这对我有用。 例。 将p元素replace为'<p>content</p>' 。 将hide（）和fadeIn（）附加到元素以replacereplaceWith参数。
$('p').replaceWith($('<p>content</p>').hide().fadeIn('slow'));
