Easy lift or drop using jQuery
Easy jQuery Lift or Drop DemoThis is a little piece of code that I have used on a number of occasions to lift or drop an element on hover and then return it on when the mouse is moved off. It is good for navigation purposes but can be used on any link inside a block.
Its very simple. jquery catches the hover and moves the parent element up. When the mouse is moved outside the link the parent element returns to its original position.
$(document).ready(function(){
$('.nav_item a').hover(function(){
$(this).parent().stop().animate({'top':'-20px'}, 500, 'swing');
}, function(){
$(this).parent().stop().animate({'top':'0px'}, 500, 'swing');
});
});
Obviously ’top’ can be replaced by any css positioning style depending on the direction you want your animation to go and the speed and easing can be changed to whatever is desired. In the demo page I also have an animated list that uses marginTop instead of ’top’ just as an example that you don’t need to have the elements positioned absolutely.
