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

主要问题：

不要混用 Pure DOM 和 jQuery 。无论您使用哪种工具，都可以使用正确的工具来完成您的工作
首先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>

Answer 2

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元素。

此外，如果您希望在fadeIn结束后立即fadeOut而不是等待JSON加载，则可以开始加载JSON同时您fadeOut，在调用两个回调时标记complete回调和fadeIn，因此当您的按钮淡出时，您的JSON正在加载，获得宝贵的400毫秒。< / p>

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

为innerHTML添加淡入/淡出效果

2 个答案: