locked
JQuery: How to replace a div with another div like linked in with bit of animation RRS feed

  • Question

  • User264732274 posted

    please see the image first.

    enter image description here

    in linked in user data comes like below UI. when we click on connect button then that div goes way and new div replace that old div with bit animation. so anyone can tell me how could i replace a div with another div with bit animation like linked in UI with jquery.

    it would be nice help if some one would discuss it with sample code. thanks

    Wednesday, September 28, 2016 3:13 PM

Answers

  • User-654786183 posted

    You can use "replaceWith()" method along with fadeIn and fadeout from jQuery.

    Please refer

    http://api.jquery.com/replacewith/

    http://www.w3schools.com/jquery/html_replacewith.asp

    <div class="foo"></div>
    
    .foo{ width: 200px; height: 200px; background: #ff0000;}
    .bar{ width: 200px; height: 200px; background: #00ff00;}
    
     $('.foo').live('click',function(){
            var $this = $(this);
            var ele = $this.clone().addClass("bar");
            $this.fadeOut('slow',function(){
                $this.replaceWith(ele);
                ele.hide().fadeIn('fast');
            });
        });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 28, 2016 5:28 PM
  • User-654786183 posted

    Please try this

    https://jsfiddle.net/SenthilSundaram/Lm0ko6f6/13/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 2:33 AM
  • User283571144 posted

    Hi sudip_inn,

    var ele = $this.clone().addClass("bar");

    As far as I know, this codes is used to copy the elements and add the new class "bar".

    For example:

     $('.foo').on('click',function(){
            var $this = $(this);
            var ele = $this.clone().addClass("bar");
     }
    
    <div class="foo"></div>

    And the result is :

    <div class="foo"></div>
    <div class="foo bar"></div>

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 10:05 AM

All replies

  • User-654786183 posted

    You can use "replaceWith()" method along with fadeIn and fadeout from jQuery.

    Please refer

    http://api.jquery.com/replacewith/

    http://www.w3schools.com/jquery/html_replacewith.asp

    <div class="foo"></div>
    
    .foo{ width: 200px; height: 200px; background: #ff0000;}
    .bar{ width: 200px; height: 200px; background: #00ff00;}
    
     $('.foo').live('click',function(){
            var $this = $(this);
            var ele = $this.clone().addClass("bar");
            $this.fadeOut('slow',function(){
                $this.replaceWith(ele);
                ele.hide().fadeIn('fast');
            });
        });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 28, 2016 5:28 PM
  • User264732274 posted
    Thanks for your code. Can u place ur code in jsfiddle just to show how it works
    Wednesday, September 28, 2016 5:58 PM
  • User-654786183 posted

    Please try this

    https://jsfiddle.net/SenthilSundaram/Lm0ko6f6/13/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 2:33 AM
  • User264732274 posted

    tell me the meaning of this line  

    var ele = $this.clone().addClass("bar");

    thanks

    Thursday, September 29, 2016 8:43 AM
  • User283571144 posted

    Hi sudip_inn,

    var ele = $this.clone().addClass("bar");

    As far as I know, this codes is used to copy the elements and add the new class "bar".

    For example:

     $('.foo').on('click',function(){
            var $this = $(this);
            var ele = $this.clone().addClass("bar");
     }
    
    <div class="foo"></div>

    And the result is :

    <div class="foo"></div>
    <div class="foo bar"></div>

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 29, 2016 10:05 AM