Delete Item Animations

Question

Fellows, I am using AJAX to delete an item from my table

var DeleteLink = function () {

   var LId = $("#HiddenLink_ID").val();

                $.ajax({

                    type: "POST",
                    url: "/my/DeleteLink",
                    data: { Link_ID: LId },
                    success: function (result) {

                        $("#row_" + LId).remove();

                    }

                })

            }

I am able to .remove the row with the ID

$("#row_" + LId).remove();

but what I want to do is to

Give it an animation such as slide left or slide right when deleted

Is it possible with my current code?

cheers

It was very close to what i was looking for – Ali Oct 18 '17 at 01:14 — Ali, Oct 18 '17 at 01:14

brainless coder · Accepted Answer · 2017-10-18T02:31:58.407

0

Basically what you need to do is,

Do an animation - Slide Left or Slide Right
At the end of the animation, use the callback method to remove the item

Something like -

$("#row_" + LId).hide("slide", { direction: "left" }, 1000, function(){
     $("#row_" + LId).remove();
});

Read more - http://api.jqueryui.com/hide/

EDIT:

JS FIDDLE - https://jsfiddle.net/1t5wh5dv/1/ (jQuery 1.9 + ui)

JS FIDDLE - https://jsfiddle.net/1t5wh5dv/2/ (jQuery 3.2.1 + ui)

edited Oct 18 '17 at 02:31

answered Oct 18 '17 at 01:07

brainless coder

6,310
1
20
36

`"slide"` is not working, i am not sure why – Ali Oct 18 '17 at 01:19
You probably need to update jquery version – brainless coder Oct 18 '17 at 02:11
I downloaded the latest one `ui` – Ali Oct 18 '17 at 02:26
Updated and Added JS FIDDLE link. Have a check. – brainless coder Oct 18 '17 at 02:32
Not sure what am i missing, "Slow" works but "slide" doesn't ` //$("#row_" + LId).hide("slow"); $("#row_" + LId).hide("slide", { direction: "left" }, 1000, function () { $("#row_" + LId).remove(); });` – Ali Oct 18 '17 at 02:36

Delete Item Animations

1 Answers1