Question

以下代码从firebase数据库中提取一个列表，该数据库位于名为“messagediv”的div id下。此div id上名为“message div”的CSS设置为none。

然后我运行一个javascript脚本，它接受带有该css的项目并将其淡入淡出。问题是它正在淡化和淡出整个列表，因为它只反对列表中的一个项目。

例如，它会淡入并淡出整个列表：

this is the first item of the list:
this is the second item of the list:
this is the third item of the list:

但我只希望它一次淡出一个，所以它会先消失：

this is the first item of the list:

然后它会消退这一秒：

this is the second item of the list:

下面是我到目前为止淡入和淡出整个列表的代码，但我只希望它一次淡出一个列表项。

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>

    <style>
    .quotes {display: none;}
    </style>
  </head>


  <body>
    <div id='messagesDiv' class="quotes"></div>


 <script>
      var myDataRef = new Firebase('https://helloworldtest.firebaseio.com');

    myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };

    </script>

<script type="text/javascript" language="javascript">
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
</script>

</body>
</html>

Answer 1

你想要这样的东西吗？

http://jsfiddle.net/prankol57/ZZskf/

您的主要问题是在加载引号之前开始showNextQuote。我创建了一个名为started的变量，以便在第一个项目加载后项目开始淡入。

此外，$(".quotes")的长度为1.（只有一个div有类＆＃34;引号＆＃34;）。我想你想要<div>所包含的.quotes元素。那就是$(".quotes div")。您可能希望添加的每个div元素都有一个名为＆＃34; .quotes＆＃34;的类。如果这是你想要的（应该是一个微不足道的变化），你需要弄清楚逻辑。

以下是相关代码：

var myDataRef = new Firebase('https://helloworldtest.firebaseio.com');
var started = false;
myDataRef.on('child_added', function (snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
});

function displayChatMessage(name, text) {
    console.log("before", $(".quotes"));
    $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#messagesDiv'));
    console.log("after", $(".quotes"));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
    if (!started) {
        // We should only start showing next quote when the message has loaded
        showNextQuote();
        started = true;
    }
};

// The loading procedure needs access to this so we can't use an anonymous function
//(function() {
var quoteIndex = -1;

function showNextQuote() {
    // We get the div elements inside ".quotes"
    var quotes = $(".quotes div");
    ++quoteIndex;
    console.log("Showing next quote", quoteIndex, quotes);
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

//})();

如何一次淡入和淡出列表中的一个项目？

1 个答案: