JQuery show() function not working

Question

I have the following JQuery code:

jQuery(document).ready(function($) {
        var retrievedList = [ {
            "id" : "one",
            "content" : "toto"
        }, {
            "id" : "two",
            "content" : "titi"
        }, {
            "id" : "three",
            "content" : "tutu"
        } ];
        $("#clickMe").click(function(evt){
            $.each(retrievedList, function(i, v) {
                if(!$('div#list> span#' + v.id).length) {
                    $('<span />').prop('id', v.id).text(v.content).appendTo('#list').show(8000);
                }
            });
            return false;
        });
    });

I am surprised to notice that the show function call does not work on the span that I create.

Can anyone tell me why and how to remedy this problem?

EDIT: Here is the html:

<div id="list">
<span id="one">toto</span> <span id="two">titi</span>
</div>
<a href="" id="clickMe">clickMe</a>

Answer 1

Instead of this:

$('<span />').prop('id', v.id).text(v.content).appendTo('#list').show(8000);

Try using this:

var span = $('<span />').prop('id', v.id).text(v.content).css('display', 'none');
$('#list').append(span);
$('#'+v.id).show(8000);