javascript - 如何创建 Jquery 幻灯片左删除列表项？

Question

您好，我正在尝试创建一个页面来加载我的图像、内容和删除选项。图像 url 和内容从数据库输出。我想要的是，单击删除图像时，它会渲染动画向左滑动​​，显示图像已被删除。到目前为止我的代码...

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>

非常感谢。

Answer 1

代替 success: 中的 slideUp() 调用，只需使用另一个 animate() 调用并执行

animate({left: 'XXXpx'})

显然将 XXX 替换为您想要的金额。这可能还需要一些额外的 css 来设置 position 以便 left 实际上正确 react 。