jQuery link nudge and color transform
- by DaveKingsnorth
Hey everyone, I have achieved the effect described in the title using the following code:
$(document).ready(function(){
$('.button').mousedown(function() {
$(this).animate({ 'top': '3px' }, 70);
});
$('.button').mouseup(function() {
$(this).animate({ 'top': '0px' }, 70);
});
$('.button').hover(function() {
$(this).stop().animate({
color: '#fff',
backgroundColor: '#000'
}, 250);
});
$('.button').mouseout(function() {
$(this).stop().animate({
color: '#000',
backgroundColor: '#fff'
}, 250);
});
});
I am pretty sure that that this code can be reduced significantly, can anyone help me out? Please note that I want the button to animate when the mouse is clicked and not return to it's original position until the mouse is released.
Cheers
