Jquery animate error

Question

it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake 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);
    });

});

@cambraca I updated the post with more info – James Kyle Oct 14 '11 at 07:21 — James Kyle, Oct 14 '11 at 07:21
@Chetan I updated the post with more info – James Kyle Oct 14 '11 at 07:22 — James Kyle, Oct 14 '11 at 07:22
And it looks pretty damn cool too! – Chetan Oct 14 '11 at 07:31 — Chetan, Oct 14 '11 at 07:31

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

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...

edited May 23 '17 at 09:59

Community

1
1

answered Oct 14 '11 at 07:45

Gustav Barkefors

5,016
26
30

Instead of adding a `span` in the HTML, add one using jQuery. – thirtydot Oct 14 '11 at 09:04

Jquery animate error

1 Answers1