Błąd animacji Jquery - javascript, jquery, css, button, jquery-animate

jest trzecia w tej chwili i nie jestem najlepszy w jquery, czy ktoś może mi powiedzieć, jaki głupi błąd popełniam?

Mam go tutaj w jsfiddle: http://jsfiddle.net/JamesKyle/7GWRp/

Występuje załamanie w przejściach css, które niezezwól na ich użycie w: przed lub po elementach, więc próbuję obejść to za pomocą jquery, która jest już używana na stronie. Zasadniczo są to trzy css stan normalny, aktywowany i aktywny.

(Próbuję ożywić mały połysk u góry)

$(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);
});

});

Odpowiedzi:

Werdykt tutaj polega na tym, że ponieważ pseudoelementy nie są częścią DOM, nie można bezpośrednio nimi kierować za pomocą jQuery.

Wstawianie elementu fizycznego, takiego jak <div class="button gray"><span></span>Button</div> wydaje mi się to najłatwiejszym rozwiązaniem, ale zaśmieca znaczniki ...