jQuery Remove Elements with Animation

Every language & libraries has its own competitors. jQuery is hardly competitor to Flash. Now a days every web developers prefer to choose jQuery instead of Flash because of its ultimate UI Effects. jQuery leads when its come to SEO point of view where Flash doesn’t. jquery remove animation is used to remove elements from the page with animation. Users can able to see the element which has been deleted with an animation effect

Deleting records in your web applications is must. So today I am going to tell you how to add multiple animations to delete records using jQuery. see more http://jqueryui.com/effect/

List of Available Effects for jQuery Remove Elements Animation

1. Blind
2. Bounce
3. Clip
4. Drop
5. Explode
6. Fade
7. Fold
8. Highlight
9. Puff
10. Pulsate
11. Scale
12. Shake
13. Size
14. Slide
15. Transfer

jQuery Code to Remove an Element with Animation

jQuery('.delete').click(function(){

var parent = jQuery(this);

//list of effects stored in array

var effects = Array('explode','bounce','fade','blind','clip','drop','fold','transfer','size','shake');

//get random effect from effects array

var effect = effects[Math.floor(Math.random()*effects.length)];

var c = confirm('Delete this record?');

if(c) parent.closest(".msg_body").hide(effect,500);

});

First I have stored all effects in an array. From that array I have taken one effect in a random manner & I had applied that effect into hide function

HTML Code

<div class="msg_body">

<div class="msg_img">

<img src="http://0.gravatar.com/avatar/82620dd66b22b34a915303b93b92929b" />

</div>

<div class="msg_text">

Facebook Style Tag Selector using jQuery & CSS3 <a href="http://w3lessons.info">Read More</a>

<div class="time">5 seconds ago <a href="javascript:;" class="delete">delete</a></div>

</div>

</div>

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

View Live Demo & Download