javascript - Switching <div> content with fade in and fade out -

<div id="div1">lorem ipsum dolor sit.</div> <div id="div2" style="display:none;">sit dolor ipsum lorem.</div> 

i have html contains code above, , want add hyperlink change content of div1 div2 content. how solve this?

algorithm:

1. div1 fade out
2. div1 content = div2 content
3. div1 fade in

i found code (failed)

$(document).ready(function(){ $("button").click(function(){     $("#div1").fadeout();     $("#div1").html(document.getelementbyid("div2").innerhtml);     $("#div1").fadein(); });}); 

*but prefer hyperlink rather button.

using jquery, following should work:

// when link clicked  $("#load").click(function (event) {    // prevent page refreshing    event.preventdefault();        // fade out    // , wait animation finish    $("#div1").fadeout().promise()    // once finished, execute following function    .done(function () {      // copy html      $("#div1").html($("#div2").html())      // fade in      .fadein();    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="div1">lorem ipsum dolor sit.</div>  <div id="div2" style="display:none;">sit dolor ipsum lorem.</div>  <a href="#" id="load">click me</a>