Mootools WordPress Delete Effect

This tutorial will show how to animate a content when a delete link is clicked. The script is based on wordpress comment deletion.

Create first a html file and put the following code inside the body.

<ul id="list">
<li>List 1 <a name="status" href="1">Delete</a></li>
<li>List 2 <a name="status" href="2">Delete</a></li>
<li>List 3 <a name="status" href="3">Delete</a></li>
<li>List 4 <a name="status" href="4">Delete</a></li>
<li>List 5 <a name="status" href="5">Delete</a></li>
<li>List 6 <a name="status" href="6">Delete</a></li>
</ul>

Then add the mootools script inside the head section of the file.

window.addEvent('domready', function(){
$('list').getElements('a[name=status]').each(function (el){
	el.addEvent('click',function(e) {
		e.stop();
		var showHighlight = function() { el.getParent('li').slide('out').set('html', ''); };
		el.getParent('li').highlight("#cc0000");
		showHighlight.delay(1000);
		});
	});
});

To achieve the effect, highlight the current element first by using highlight() function that can be found in line 6. It immediately transitions an element’s background color to a specified highlight color then back to its set background color. To slide the element, use the slide(‘out’) function. To remove the element’s content, set the content to an empty string by using the set(‘out’).

To completely remove the element, dispose function can be added at the end of Line 5.

See it in action
Click here to download