Question

我想从JSON文件中淡入文本。现在我只能输出JSON文件中的所有名称。我希望能够一次显示一个名称并使下一个名称淡入。我该怎么做？

data.json：

[{"name" : "Bill"},{"name" : "George"},{"name" : "Mike"},{"name" : "Stan"}]

的script.js：

    $(document).ready(function () { // load json file using jquery ajax
    $.getJSON('data.json', function (data) {
        var output = '<p>';
        $.each(data, function (key, val) {
            output += '<p>' + val.name + '<br/>';
        });
        $('#text').html(output); // replace all existing content
    });
});

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="text"></div>

<script>
(function() {
    var names = $("#text");
    var quoteIndex = -1;

    function showNextName() {
        ++quoteIndex;
        names.eq(quoteIndex % names.length)
            .fadeIn(300)
            .delay(300)
            .fadeOut(2000, showNextName);
    }
    showNextName();
})();
</script>
</body>
</html>

Answer 1

根据提供的代码，您的实际HTML输出将如下所示：

<div id="text">
  <p>Bill</p>
  <p>George</p>
  <p>Mike</p>
  <p>Stan</p>
</div>

然后您需要隐藏所有 p 标记，然后将p内的每个#text定位到fadeIn，试试这个：

$(function() {
    var quoteIndex = 0;
    function showNextName() {
        $('#text p').eq(quoteIndex)
            .fadeIn(700, showNextName);
        quoteIndex++
    }
    showNextName();
});

检查摘录

＆＃13;

$(function() {
    var quoteIndex = 0;
    function showNextName() {
        $('#text p').eq(quoteIndex).fadeIn(700, showNextName);
        quoteIndex++
    }
    showNextName();
});

＆＃13;

#text p {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
  <p>Bill</p>
  <p>George</p>
  <p>Mike</p>
  <p>Stan</p>
</div>

＆＃13;

修改

仅在页面上查看一个名称

＆＃13;

$(function() {
    var quoteIndex = 0,
        nup        = $('#text p').length;
    function showNextName() {
        $('#text p').eq(quoteIndex)
                    .fadeIn(700)
                    .delay(500)
                    .fadeOut(400, showNextName)
        if (quoteIndex >= nup-1) {
          quoteIndex=0
        } else {
          quoteIndex++
        }
    }
    showNextName();
});

＆＃13;

#text p {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
  <p>Bill</p>
  <p>George</p>
  <p>Mike</p>
  <p>Stan</p>
</div>

＆＃13;

使用Jquery淡入文本并从JSON文件一次显示每个文本

1 个答案: