2

我的 HTML 如下。由于我从数据库中提取并使用while循环，因此有多个实例。

<div class="container">
    <div class="some_stuff">content1</div>
    <div class="more_stuff">content2</div>
    <div class="delete">
        <a href="#" id="itemID" class="deleteContainer">Delete</a>
    </div>
</div>

jQuery：

$(function() {
$(".deleteContainer").click(function() {
    var container=$(this).closest("div.container");
    var containerid = $(this).attr("id");

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: "id=" + containerid,
        cache: false,
        success: function() {
            container.slideUp(500, function() {$(this).remove();});
        }
    });
return false;
});
});

这个想法是每个容器内的“删除”链接会导致从数据库中删除相应的字段，并且在成功后，相应的容器会向上滑动并被删除。delete.php工作正常，动画效果大部分正常。我遇到的问题是它slideUp不会滑动，而是分两部分发生：首先，看起来底部的边距<div class="container">立即消失（没有滑动效果），然后在大约四分之一秒后剩下的的<div class="container">消失。数据库调用工作正常——适当的内容被删除，页面在后续访问时正确呈现。我只是不知道动画发生了什么（在 Safari、Opera、Chrome 和 Firefox 中测试）。

在测试是否是 AJAX 问题（例如服务器响应延迟）时，我尝试了：

$(window).load(function(){
    $(".container").click(function(){
        $(this).slideToggle(500);
    });
});

这仍然存在同样的问题，即slideUp()分段发生，所以我猜这与 jQuery 和 HTML 结构（可能是嵌套<div>的 s？）有关。同一页面上的其他场景slideUp()工作正常。

4

0 回答 0