Jquery animovaná chyba - javascript, jquery, css, button, jquery-animate

je to 3 am práve teraz a ja nie som najlepší v jquery, môže mi niekto povedať, čo hlúpe chybu som robiť?

Mám ho tu v jsfiddle: http://jsfiddle.net/JamesKyle/7GWRp/

Tam je zlomy v css prechody, ktoré don "tumožňujú, aby boli použité na: pred alebo po elementoch, takže sa snažím urobiť riešenie pomocou jQuery, ktorá sa už používa na stránke. V podstate ide o tri stavy css normálne, vznášajúce sa a aktívne.

(Snažím sa oživiť malý lesk na vrchole)

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

});

odpovede:

Verdikt tu je, že keďže pseudo elementy nie sú súčasťou DOM, nemôžu byť priamo zacielené na jQuery.

Vkladanie fyzického prvku <div class="button gray"><span></span>Button</div> Zdá sa mi, že je to najjednoduchšie riešenie, ale neporiadok značky ...