It's the wee hours of the morning and my jQuery skills are not the greatest. Can anyone point out the silly mistake I'm making?
I've created a JSFiddle for easy access: http://jsfiddle.net/JamesKyle/7GWRp/
Due to an issue with CSS transitions not working on :before or :after elements, I am attempting a workaround using jQuery which is already implemented on the page. The goal is to animate three CSS states - normal, hover, and active.
(Specifically, I want to animate the small shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});