Jquery 替换淡入淡出/动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5248721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery replacewith fade/animate
提问by Richard Dalton
I know there are loads of questions on replacewith but none seem to have answers that apply to my situation.
我知道有很多关于 replacewith 的问题，但似乎没有一个答案适用于我的情况。
html: <div id="foo"></div>
html： <div id="foo"></div>
I want #foo to be faded out, then I want to replace the whole thing (not just the contents) with essentially the same thing <div id="foo"></div>which is faded in.
我希望#foo 淡出，然后我想用基本上相同的<div id="foo"></div>淡入内容替换整个内容（而不仅仅是内容）。
Thanks
谢谢
回答by Richard Dalton
$('#foo').fadeOut("slow", function(){
var div = $("<div id='foo'>test2</div>").hide();
$(this).replaceWith(div);
$('#foo').fadeIn("slow");
});
jsfiddle - http://jsfiddle.net/9Dubr/1/
jsfiddle - http://jsfiddle.net/9Dubr/1/
Updated to fade in correctly
更新为正确淡入
回答by Jason MacLean
$('#foo').fadeOut("slow", function(){
$('#foo').html(data);
$('#foo').fadeIn("slow");
}
回答by Pierre-David Belanger
I successfully use this pattern to GET+fadeOut+fadeIn (with jQuery 1.11.0):
我成功地使用这种模式来 GET+fadeOut+fadeIn（使用 jQuery 1.11.0）：
$.get(url).done(function(data) {
$target.fadeOut(function() {
$target.replaceWith(function() {
return $(data).hide().fadeIn();
});
});
});
where $targetis the element to replace.
$target要替换的元素在哪里。
回答by Twentyonehundred
Richard Daltons answer is correct and is useful.
理查德道尔顿的回答是正确的并且很有用。
In case anyone else is looking to solve a very similar situation, but with a lot more content being updated, the following worked for me. My example includes 'response', which is an Ajax returned heap of HTML.
如果其他人希望解决非常相似的情况，但更新了更多内容，以下内容对我有用。我的示例包括“响应”，它是 Ajax 返回的 HTML 堆。
$('.foo').fadeOut("slow", function() {
var div = jQuery('<div style="display:none;" class="foo">'+response+'</div>');
$('.foo').replaceWith(div);
$('.foo').fadeIn("slow");
});
The reason with the .hide() needs to be changed is that it applies it to all elements within the response. There may be more elegant solutions than this, but it works.
需要更改 .hide() 的原因是它将它应用于响应中的所有元素。可能有比这更优雅的解决方案，但它有效。
回答by Ian Wood
回答by Shorty
lesser code, this works for me:
较少的代码，这对我有用：
$jq('#taggin').replaceWith($jq('#rotator'));
$jq('#rotator').fadeIn("slow").show();
replace "slow" with ms (eg 2000)
用 ms 替换“慢”（例如 2000）
回答by Phyo
This works for me.
Example. Replace p element with '<p>content</p>'. Keep hide() and fadeIn() attached to element to replace and within replaceWith argument.
这对我有用。例子。用 替换 p 元素'<p>content</p>'。保持hide() 和fadeIn() 附加到要替换的元素并在replaceWith 参数中。
$('p').replaceWith($('<p>content</p>').hide().fadeIn('slow'));
回答by Dmitrii Malyshev
You can also use shuffle function written by James Padolsey with a little modification:
您还可以使用 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);
And then in your handler use $('.albums .album').shuffle(); to shaffle your elements with fade.
然后在您的处理程序中使用 $('.albums .album').shuffle(); 用淡入淡出你的元素。
回答by christian
I've written a jQuery plugin to handle this.
我写了一个 jQuery 插件来处理这个问题。
It allows for a callback function which can be passed the replacement element.
它允许可以传递替换元素的回调函数。
$('#old').replaceWithFade(replacementElementSelectorHtmlEtc,function(replacement){
replacement.animate({ "left": "+=50px" }, "slow" );
});
The plugin
插件
(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));
