2010-02-17 22 views
1

嗨我想創建一個頁面加載我的圖像,內容和刪除選項。圖片網址和內容從數據庫中輸出。我想要的是,點擊刪除圖像時,它會渲染動畫,向左滑動,顯示圖像已被刪除。到目前爲止我的代碼...如何爲列表項目創建Jquery slideLeft刪除?

jQuery腳本:

$(function() { 
$("#sortable").sortable(); 
$('a.delete').click(function(e) { 
    e.preventDefault(); 
    var parent = $(this).parent(); 
    $.ajax({ 
     type: 'get', 
     url: 'jquery-record-delete.php', 
     data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function() { 
      //parent.slideUp(300,function() { 
          // replaced with following 
          parent.animate({left: '100px'}, 300, function() { 
       parent.remove(); 
      }); 
     } 
    }); 
}); 
}); 

查詢;

if(isset($_GET['delete'])) 
{ 
    mysql_select_db($database_conn_foliodb, $conn_foliodb); 
    $query_rs_text = 'DELETE FROM text WHERE text_id = '.(int)$_GET['delete']; 
    $result = mysql_query($query_rs_text, $conn_foliodb) or die(mysql_error()); 
} 

mysql_select_db($database_conn_foliodb, $conn_foliodb); 
$query_rs_images = 'SELECT * FROM text ORDER BY text_id ASC'; 
$rs_images = mysql_query($query_rs_images, $conn_foliodb) or die(mysql_error()); 
$row_rs_images = mysql_fetch_assoc($rs_images); 

體輸出:

<div class="demo"> 
<ul id="sortable"> 
<?php 
do { 
    echo '<li class="record" id="record-'.$row_rs_images['text_id'].'"><table><tr><td> 
       <strong>'.$row_rs_images['content'].'</strong> 
      </td></tr> 
      <tr><td><img src="'.$row_rs_images['img'].'" width="100" height="100" /><tr><td> 
      <tr><td><a href="?delete='.$row_rs_images['text_id'].'" class="delete">Delete</a><tr><td> 
      </table></li>'; 
} while($row_rs_images = mysql_fetch_assoc($rs_images)) 

?> 
</ul> 
</div> 

非常感謝你。

回答

1

,而不是你的slideUp()呼叫在success:只是用另一animate()呼叫並做

animate({left: 'XXXpx'}) 

明顯替換XXX與您需要的金額。這可能還需要一些額外的CSS來設置position,以便left實際上反應正常。

+0

@contagious:嗨,我有一些問題實現它。可以點擊並設置動畫,但無法從數據庫中刪除。我的原始腳本有問題嗎?謝謝。 –

+0

我已經明白了。這是父()的問題。謝謝。 –