在AJAX成功之后隐藏div

Question

Im using the following AJAX call to update a record in my table:

$(function() {
    $(".decline").click(function(){
        var element = $(this);
        var del_id = element.attr("id1");
        var order_id = element.attr("data-order1");
        $.ajax({
            type: "POST",
            url: "decline.php",
            data: {id1:del_id,order_id1:order_id},
            success: function(){cache: false}
        });
        $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
            .animate({ opacity: "hide" }, "slow");
    });
});

It animates the div as required when zi click on the selector class .decline here:

<div class="<?php echo ($accept == '1')?'showop':'show';?>">
<span class="growthcust">$<?php echo number_format($growth);  ?></span>
<span class="accepted"><a href="#" class="accept" id="<?php echo $id1; ?>" data-order="<?php echo $name; ?>"><input type="button" title="accept" value="Accept" /></a></span>
<span><a href="#"  class="decline"   id1="<?php echo $id1; ?>" data-order1="<?php echo $name; ?>"><input type="button" title="declined" value="Decline" /></a></span>
</div>

but Id like to move the function to my AJAX call so the div hides after the AJAX call succeeds.

How would I change it to animate upon success?

Answer 1

Run the hiding code in the success callback. You can access the current element using the element variable that you bound.

$(function() {
    $(".decline").click(function(){
        var element = $(this);
        var del_id = element.attr("id1");
        var order_id = element.attr("data-order1");
        $.ajax({
            type: "POST",
            url: "decline.php",
            data: {id1:del_id,order_id1:order_id},
            // cache: false, // Not needed for POST, they're never cached
            success: function(){
                element.parents(".show").animate({ backgroundColor: "#003" }, "slow")
                    .animate({ opacity: "hide" }, "slow");
            }
        });
    });
});