为innerHTML添加渐入/渐出效果

Adding a fade in/fade out effect to innerHTML

本文关键字：innerHTML 添加      更新时间：2023-09-26

我目前有一个函数，加载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();
});
}

当我按下按钮调用这个函数时，我遇到了一个问题，代码改变了元素，然后淡出并返回。我希望我可以淡出文本，然后改变元素，然后最后淡出它回来。谢谢你！

主要问题:

  1. 不要把纯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>

jQuery有一个complete回调，所以当fadeOut结束时被调用:

function loadNextPassage() {
    var timeout = 400;
    //Fading out effect
    $("#passage-title").fadeOut(timeout);
    $("#title").fadeOut(timeout);
    $("#pre-post").fadeOut(timeout);
    $("#passage").fadeOut(timeout);
    $("#media").fadeOut(timeout, function() {
        //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(timeout);
            $("#title").fadeIn(timeout);
            $("#pre-post").fadeIn(timeout);
            $("#passage").fadeIn(timeout);
            $("#media").fadeIn(timeout);
        });
    });
}

说到其他的事情，一个更好的优化将是所有的元素在一个元素(div，例如)，只有fadeOut和fadeIn的元素。

另外，如果你想在fadeOut结束后立即fadeIn，而不是等待你的JSON加载，你可以开始加载你的JSON，同时你的fadeOut，标记complete回调和fadeIn，当两个回调都被调用时，所以当你的按钮淡出你的JSON正在加载，赚取宝贵的400毫秒。

http://api.jquery.com/fadeout/

相关文章：