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

代替slideUp()中的success:来电，只需使用其他animate()来电，然后执行

animate({left: 'XXXpx'})

显然用您想要的金额替换XXX。这可能还需要一些额外的css来设置position，以便left实际上做出正确的反应。

如何创建一个Jquery幻灯片左删除列表项？

1 个答案: