CODEWITHSUNDEEP
jquery
user623520
user623520

Reputation:

Jquery replacewith fade/animate

I know there are loads of questions on replacewith but none seem to have answers that apply to my situation.

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.

Thanks

Upvotes: 42

Views: 52858

Answers (9)

Phyo
Phyo

Reputation: 31

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').replaceWith($('<p>content</p>').hide().fadeIn('slow'));

Upvotes: 0

Shorty
Shorty

Reputation: 23

lesser code, this works for me:

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

replace "slow" with ms (eg 2000)

Upvotes: 0

Twentyonehundred
Twentyonehundred

Reputation: 2239

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.

$('.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.

Upvotes: 2

christian
christian

Reputation: 2489

I've written a jQuery plugin to handle this.

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

Upvotes: 0

Dmitrii Malyshev
Dmitrii Malyshev

Reputation: 629

You can also use shuffle function written by James Padolsey with a little modification:

(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.

Upvotes: 0

Pierre-David Belanger
Pierre-David Belanger

Reputation: 1054

I successfully use this pattern to GET+fadeOut+fadeIn (with jQuery 1.11.0):

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

where $target is the element to replace.

Upvotes: 4

Ian Wood
Ian Wood

Reputation: 6573

This version will 'live' on ;)

jsfiddle effort

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

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

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

Updated to fade in correctly

Upvotes: 77

Jason MacLean
Jason MacLean

Reputation: 513

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

Upvotes: 13

Related Questions