Using jQuery to create a slide-left-and-fade effect

A couple years ago I had the idea of adding a UI effect to an application I had built (a lightweight Task board) that mimicked the notification bar in Android – specifically, an item could be “swiped” off the board and the DIV representing the item would have an animation sliding left (or right) while also fading out.


Accomplishing that effect was as simple as one line of jQuery:


That’s it! You can then implement this upon any sort of event or user interaction (mine happens here upon clicking a “Mark Complete” button) and you’re set.

And for those wondering what makes it all work, the .stop() ensures no conflicting animations are being run (this particular application allows users to re-order & shuffle their board) and the animation itself handles the sliding & fading out via the “left: ‘-=600′” (move the element 600 pixels to the left of where it currently is) & “opacity: ‘hide’” (change the opacity to hide the element) properties.

Comments are closed.