javascript - 向 innerHTML 添加淡入/淡出效果

Question

我目前有一个函数可以加载 JSON 文件并更改我页面上几个 div 的内容。这部分工作正常，但我想让它看起来性感。单击调用此函数的按钮时，新文本立即替换旧文本。我希望旧文本淡出、更改文本并淡入新文本。

这是我的代码

function loadNextPassage()
    {
    //Fading out effect
    $("#passage-title").fadeOut();
    $("#title").fadeOut();
    $("#pre-post").fadeOut();
    $("#passage").fadeOut();
    $("#media").fadeOut();

    //load the new JSON file and change the elements
    $.getJSON("passage-2.3.2.JSON", function( data ) {

    document.getElementById("passage-title").innerHTML = data["passageNumber"];
    document.getElementById("title").innerHTML = data["title"];
    document.getElementById("pre-post").innerHTML = data["preReading"];
    document.getElementById("pre-reading-content").innerHTML = data["preReading"];
    document.getElementById("post-reading-content").innerHTML = data["postReading"];
    document.getElementById("passage").innerHTML = data["reading"];
    document.getElementById("media").innerHTML = data["media"];

    //fading the elements back in
    $("#passage-title").fadeIn();
    $("#title").fadeIn();
    $("#pre-post").fadeIn();
    $("#passage").fadeIn();
    $("#media").fadeIn();
});
}

当我按下按钮调用此函数时，我遇到了一个问题，代码更改了元素，然后淡出又淡入。我希望我可以淡出文本，然后更改元素，最后淡出它早在。谢谢你!

Answer 1

主要问题:

1. 不要混合使用 Pure DOM 和 jQuery。无论您有什么可用的工具，都要为您正在做的事情使用正确的工具
2. 首先 fadeOut() 并在回调中更改文本和 fadeIn()。

片段

$(function () {
  $("button").click(function () {
    $("p").fadeOut(400, function () {
      $(this).html("Second One").fadeIn(400);
    });
  });
});

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Next</button>
<p>First One</p>