javascript - 使用淡入淡出切换 <div> 内容

Question

<div id="div1">Lorem Ipsum Dolor Sit.</div>
<div id="div2" style="display:none;">Sit Dolor Ipsum Lorem.</div>

我有一个包含上述代码的 html，并且想添加一个超链接，将 div1 的内容更改为 div2 的内容。如何解决？

算法:

1. div1 淡出
2. div1 内容 = div2 内容
3. div1 淡入

我找到了这段代码(失败)

$(document).ready(function(){
$("button").click(function(){
    $("#div1").fadeOut();
    $("#div1").html(document.getElementById("div2").innerHTML);
    $("#div1").fadeIn();
});});

*但我更喜欢超链接而不是按钮。

Answer 1

使用 JQuery，以下应该有效:

// when link is clicked
$("#load").click(function (event) {
  // prevent page from refreshing
  event.preventDefault();
  
  // fade out
  // and wait for animation to finish
  $("#div1").fadeOut().promise()
  // once finished, execute the 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>