Jquery animate error

it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake开发者_如何学C I'm making?

I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/

There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.

(I'm trying to animate the little 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);
    });

});

The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.

Inserting a physical element like <div class="button gray"><span></span>Button</div> seems to me to be the easiest solution but it does clutter the markup...