Question

我的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>？）有关。在同一页面上slideUp()的其他方案可以正常工作。

jQuery slideUp（）是Chested with Nested Divs

0 个答案: