Delete Row Animation WordPress Style In jQuery
Ok, so I don’t want to act like I’m copying or anything, but a few people asked me recently how to make an animation like WordPress has when it deletes a row in it’s tables. Well in Mootools it can be acheved by following this great tutorial by David Walsh. However I was asked how to do it in jQuery. Well I gave it a go and this is what I came up with.
Some CSS
First let’s have a little bit of CSS to make things pretty.
|
1 2 3 4 5 6 7 8 9 10 11 |
.box { width:300px; padding:10px 20px; color:black; background:#EEE; text-align:left; border-top:1px solid #CCC; } .box a { float:right; } |
This is just to make a table like structure of rows. Why divs? Well they are easier to select in jQuery & tables are so passe… Ok, you could quite easily do it with tables, but I chose divs.
Some HTML
Here is my HTML. This would probably be generated by PHP but this is just a jQuery tutorial. I might expand it later when I have some more time.
|
1 2 3 |
<div class="box"><a href="#">delete</a><strong>Item Number 1</strong></div> <div class="box"><a href="#">delete</a><strong>Item Number 2</strong></div> <div class="box"><a href="#">delete</a><strong>Item Number 3</strong></div> |
Ahhh! jQuery
Awww. Come on the little thing isn’t that scary. It’s actually really easy. Harder than it first seems, but really easy. First I need to say something. You will need the color plugin which you can get here. Just click download, copy the text into notepad, save it as jquery.color.js and then attach it to the post underneath jQuery. Here is the code you need.
|
1 2 3 4 5 6 7 |
$(function(){ $('.box a').click(function() { $(this).parents('div.box').animate( { backgroundColor: '#cb5555' }, 500).animate( { height: 0, paddingTop: 0, paddingBottom: 0 }, 500, function() { $(this).css( { 'display' : 'none' } ); }); }); }); |
Let’s go throught the code a bit.
First we use the document ready, that is a short hand way of writing $(document).ready(function() { .... Next we find every element with a class of box that also have an <a> inside, we then assign a click function to them all. You could target it more by using div.box a but I’m trying to keep it simple.
Now the tricky bit. this means the current element we have selected. That would be the <:a> inside the element that has the class box… Make sense? We use parents to go backwards an element and select the <div> instead of the <a>. Then we get to the animation. We change the background color to a redish color, and we get it to take 500 milliseconds (half a second). Next we have a tricky bit, to cut a long story short because of the padding using slideUp will not work. So instead we animate the height, padding top, and padding bottom all together, again for half a second. Reducing the height will not hide the content so we use a callback, it runs when the second animate has finished, to set display to none therefore hiding the content. That’s about it.
This, at the minute, could only be used to make boxes of content disappear in a funky way. If you want to use it like WordPress do, so it removes content from a database then you’ll need some PHP code & a $.post function to do it. I might do a tutorial on that a little later. Until then, I hope this tutorial was of use. Any questions, suggestions or comments? Feel free to leave one below.
You can see a working example by clicking here.
