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.