How do I fade in and fade out one item of a list one at a time?

Question

The following code pulls a list from the firebase database, which falls under the div id called 'messagediv'.The CSS on this div id called 'message div' is set to display none.

I then run a javascript script that takes items with that css and fades it in and out. The issue is that it is fading in and fading out the entire list, as oppose to just one item of the list.

For example, it fades in and fades out this entire list:

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

but I only want it to fade in and out one at a time, so it would fade this first:

this is the first item of the list:

Then it would fade this second:

this is the second item of the list:

Below is the code I have so far that fades in and out the entire list, but I only want it to fade in and out one item of the list one at a time.

<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

Do you want something like this?

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

Your main problem is that you start to showNextQuote before the quotes are loaded. I've created a variable called started so that the items start fading in as soon as the first one has loaded.

In addition, the length of $(".quotes") is 1. (There is only one div with class "quotes"). I think you wanted the <div> elements insided of .quotes . So that is $(".quotes div") . It's possible you wanted each div element that you add to have a class called ".quotes". You'll need to work out the logic if that's what you wanted (should be a trivial change).

Here is the relavent code:

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);
}

//})();

How do I fade in and fade out one item of a list one at a time?

Question

1 answers

solution1
3 ACCPTED 2014-06-29 21:24:00

How do I fade in and fade out one item of a list one at a time?

Question

1 answers

solution1 3 ACCPTED 2014-06-29 21:24:00

solution1
3 ACCPTED 2014-06-29 21:24:00