How to create a Jquery slideLeft delete for list item?

Question

Hi I am trying to create a page loading my image, content, and the delete option. The image url and content are output from database. What I want to need is that on clicking of the delete the image, it would render animation to slide left showing the the image has been removed. My code so far ...

Jquery Script:

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

Query;

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

Body Output:

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

Thank you very much.

Answer 1

instead of your slideUp() call in the success: just use another animate() call and do

animate({left: 'XXXpx'})

obviously replacing XXX with your desired amount. this may also require some additional css to set the position so that left actually reacts properly.