Question

我知道有很多关于替换的问题，但似乎没有一个问题适用于我的情况。

html：<div id="foo"></div>

我希望#foo消失，然后我想用基本相同的事物<div id="foo"></div>替换整个事物（不仅仅是内容）。

由于

Answer 1

$('#foo').fadeOut("slow", function(){
    var div = $("<div id='foo'>test2</div>").hide();
    $(this).replaceWith(div);
    $('#foo').fadeIn("slow");
});

jsfiddle - http://jsfiddle.net/9Dubr/1/

已更新为正确淡入

Answer 2

$('#foo').fadeOut("slow", function(){
  $('#foo').html(data);
  $('#foo').fadeIn("slow");
}

Answer 3

我成功地将此模式用于GET + fadeOut + fadeIn（使用jQuery 1.11.0）：

$.get(url).done(function(data) {
    $target.fadeOut(function() {
        $target.replaceWith(function() {
            return $(data).hide().fadeIn();
        });
    });
});

其中$target是要替换的元素。

Answer 4

此版本将“生效”;）

jsfiddle effort

Answer 5

Richard Daltons的回答是正确的，也很有用。

如果其他人想要解决一个非常类似的情况，但有更多的内容正在更新，以下工作对我有用。我的示例包括＆＃39; response＆＃39;，这是一个Ajax返回的HTML堆。

$('.foo').fadeOut("slow", function() {
  var div = jQuery('<div style="display:none;" class="foo">'+response+'</div>');
  $('.foo').replaceWith(div);
  $('.foo').fadeIn("slow");
});

需要更改.hide（）的原因是它将它应用于响应中的所有元素。可能有比这更优雅的解决方案，但它有效。

Answer 6

您也可以使用James Padolsey编写的随机播放功能进行一些修改：

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

然后在你的处理程序中使用$（＆＃39; .albums .album＆＃39;）。shuffle（）;用淡化来揉搓你的元素。

Answer 7

我已经编写了一个jQuery插件来处理这个问题。

它允许一个可以传递替换元素的回调函数。

$('#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));

Answer 8

较少的代码，这对我有用：

  $jq('#taggin').replaceWith($jq('#rotator'));
  $jq('#rotator').fadeIn("slow").show();

替换＆＃34;慢＆＃34;与ms（例如2000）

Answer 9

这对我有用。例。将p元素替换为'<p>content</p>'。保持hide（）和fadeIn（）附加到要替换的元素和replaceWith参数。

$('p').replaceWith($('<p>content</p>').hide().fadeIn('slow'));

Jquery替换褪色/动画

9 个答案: