Jquery动画错误

现在是凌晨3点，我不是最擅长jquery，谁能告诉我我犯了什么愚蠢的错误?

我在这里有一个jsfiddle: http://jsfiddle.net/JamesKyle/7GWRp/

有一个扭结在css过渡，不允许他们被使用:之前或:之后的元素，所以我试图做一个变通使用jquery已经在页面上使用。基本上这是三个css状态normal, hover和active。

(我正在尝试让顶部的小亮点动起来)

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