jquery prepend and slide down problem

I am trying to build an application that allows users to upload a song list onto their site. The functions work and when the list is uploaded it slides down and fades in. Here is the Jquery...

function list_post() {
    var list_date = $("#list_date").val();
    var team_name = $("#team_name").val();
    var song_list = $("#song_list").val();

    if (list_date == "" || team_name == "" || song_list == ""){
        alert("Please enter a list!");
    }else{
            $.post("scripts/send_list_parse.php", {list_date: list_date, team_name: team_name, song_list: song_list}, function(data){
                $(".list").prepend(data);
                $("#fade").fadeIn(1500);
                $(".list").slideDown(900);
                $("#list_date").val("");
                $("#team_name").val(team_name);
                $("#song_list").val("");
            });
    }
}

The problem is, when I upload the second list it doesn't fade in or slide down it just appears. I would like it to fade and slide each time the button is clicked. Any Ideas?

Here is the send_list_parse.php file...

<?php
session_start();
include_once("connect_to_mysql.php");
include_once("checkuserlog.php");

if(isset($_POST['list_date']) && ($_POST['song_list']) && ($_POST['team_name'])){
    $list_date = $_POST['list_date'];
             $list_date = stripslashes($list_date);
         $list_date = strip_tags($list_date);
         $list_date = preg_replace('/\r?\n|\r/', "<br />", $list_date);
         $list_date = mysql_real_escape_string($list_date);
         $list_date = str_replace("'", "&#39;", $list_date);
         $list_date = "".$list_date."";
    $song_list = $_POST['song_list'];
         $song_list = stripslashes($song_list);
         $song_list = strip_tags($song_list);
         $song_list = preg_replace('/\r?\n|\r/', "<br />", $song_list);
         $song_list = mysql_real_escape_string($song_list);
         $song_list = str_replace("'", "&#39;", $song_list);
    $team_name = $_POST['team_name'];
         $team_name = stripslashes($team_name);
         $team_name = strip_tags($team_name);
         $team_name = preg_replace('/\r?\n|\r/', "<br />", $team_name);
         $team_name = mysql_real_escape_string($team_name);
         $team_name = str_replace("'", "&#39;", $team_name);

    $sql = mysql_query("INSERT INTO list (date, team_name, song_list) VALUES ('$list_date','$team_name','$song_list')") or die (mysql_error());
    echo '<div id="fade"><span><h4 style="margin-bottom:0px; font-size:14px;">'.$list_date.'</h4>'.$song_list.'<br /></span></div>';
}else{
    echo "Error";
}
?>

Here is the portion of the original page where I create the list...

$create_song_list = '
        <div class="boxHeader2" style="padding:0px; margin:0 auto;">
        <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox(\'infoBox\');" style="color:white; font-weight:bold; text-decoration:none;">&bull;&emsp;Create Song-List</a>
        </div><div class="editBox" id="infoBox" style="color:white; font-size:15px; margin:7px 5px 0px 15px;">
        <input id="list_date" name="list_date" type="text" placeholder="List-Date" style="width:100%;" /><br />
        <textarea id="song_list" name="song_list" placeholder="Song List Here" style="width:100%;" rows="7"></textarea><br />
        <input id="team_name" name="team_name" type="hidden" value="'.$team_name.'" />
        <input id="submit_list" name="submit_list" type="submit" value="submit" onclick="javascript:list_post();" /><开发者_StackOverflowbr />
        </div>';

This is where it is rendered...

// ------- Populate Song List ---------------------------
$display_song_list = '';
$sql = mysql_query("SELECT * FROM list WHERE team_name='$team_name' ORDER BY id DESC LIMIT 9"); // Query List
$count_sql = mysql_num_rows($sql);
if($count_sql > 0){
    while($row = mysql_fetch_array($sql)){
        $song_list = $row['song_list'];
        $date = $row['date'];
        $display_song_list .= '
    <div class="list" style="display:none;">

        </div>
    <h4 style="margin-bottom:0px; font-size:14px;">'.$date.'</h4>'.$song_list.'<br />';
    }
}
// ------- End Populate Song List -----------------------

---

Try this: (untested)

function list_post() {

    var list_date = $("#list_date").val();
    var team_name = $("#team_name").val();
    var song_list = $("#song_list").val();

    var dataString = 'list_date='+list_date+'&team_name='+team_name+'&song_list='+song_list;

    if (list_date == "" || team_name == "" || song_list == ""){
        alert("Please enter a list!");
    } else {

        $.ajax({
            url: "scripts/send_list_parse.php",
            method: 'POST',
            data: dataString,
            cache: false,
            beforeSend: function() {$("#fade").fadeIn(1500);},
            success: function(data){
                $("#list").prepend(data).delay(2000).slideDown(900);
                $("#list_date").val("");
                $("#team_name").val(team_name);
                $("#song_list").val("");                
            }
        });

    }

}

---

It's unclear how you're marking up the list (I'd hope in either a <ol> or <ul> but you need to hide() the injected elemented before applying fadeIn() to it.

Inserting it into the DOM with prepend() will just render it there and then.