jquery prepend and slide down 문제가 발생했습니다.

Question

사용자가 노래 목록을 사이트에 업로드 할 수있는 응용 프로그램을 작성하려고합니다. 기능이 작동하고 목록이 업로드 될 때 아래 슬라이드와 페이드. 여기 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(""); 
      }); 
    } 
} 

문제는,이 페이드 인 또는 아래로 밀어하지 않습니다됩니다 그냥 나타납니다. 단추를 클릭 할 때마다 페이드되고 슬라이드됩니다. 어떤 아이디어? 여기

가 렌더링된다

$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();" /><br /> 
     </div>'; 

이게 ... 여기

<?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"; 
} 
?> 

내가 목록을 생성 일본어 페이지의 일부는 ... send_list_parse.php 파일이며 ...

// ------- 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 ----------------------- 

Answer 1

이 시도 : (안된)

당신이 목록을 표시하고 방법

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

    } 

} 

Answer 2

그것은 불분명 (나는 소망을 것 중 하나 <ol> 또는 <ul>하지만 당신은 그것에 fadeIn()을 적용하기 전에 elemented 주입되는 hide()해야합니다.

prepend()으로 DOM에 삽입하면됩니다.