Jquery replacewith fade/animate

Я знаю, что на замену есть множество вопросов, но ни один из них не имеет ответов, которые относятся к моей ситуации.

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

Я хочу, чтобы #foo исчезал, тогда я хочу заменить все (а не только содержимое) по существу тем же самым <div id="foo"></div>, которое исчезло.

Спасибо

Ответ 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/

Обновлено для правильного затухания

Ответ 2

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

Ответ 3

Я успешно использую этот шаблон для GET + fadeOut + fadeIn (с jQuery 1.11.0):

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

где $target - это элемент для замены.

Ответ 4

Эта версия будет "live" on;)

jsfiddle effort

Ответ 5

Ответ Ричарда Дальтона правильный и полезен.

В случае, если кто-то еще хочет решить очень похожую ситуацию, но с обновлением большего количества контента, для меня это работало. Мой пример включает в себя "ответ", который является возвратной кучей Ajax HTML.

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

Необходимо изменить причину с .hide(), чтобы она применила ее ко всем элементам ответа. Могут быть более элегантные решения, чем это, но он работает.

Ответ 6

Вы также можете использовать функцию тасования, написанную Джеймсом Падольси, с небольшой модификацией:

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

И затем в вашем обработчике используйте $('. альбомы. album'). shuffle(); для того, чтобы смять ваши элементы с выцветанием.

Ответ 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));

Ответ 8

меньший код, это работает для меня:

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

заменить "slow" на ms (например, 2000)

Ответ 9

Это работает для меня. Пример. Замените элемент p на '<p>content</p>'. Сохраните hide() и fadeIn(), прикрепленные к элементу, чтобы заменить его и в пределах аргумента replaceWith.

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