How to animate or timing a Pseudo class using jQuery

Question

Say I have an element and I want to change it on a hover state.

Using a Pseudo class it will look like this:

#element:before { background-position: 0px -50px; }
#element:hover:before { background-position: -50px -50px; }

Can I implement a jQuery animation function to it? or can I time its transition?

Of course it can be solved by CSS only, however I'm loosing the ability and advantages of using a Pseudo class. — Lior Elrom, Apr 18 '13 at 16:39

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

This is not possible with jQuery.

Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.
- (source)

You could use this in your CSS to achive a transition effect, but this will not work in older browsers:

#element:before {
    -webkit-transition: background-position 1s linear;
    -moz-transition: background-position 1s linear;
    -o-transition: background-position 1s linear;
    -ms-transition: background-position 1s linear;
    transition: background-position 1s linear;
}

edited May 23 '17 at 10:25

Community

1
1

answered Apr 18 '13 at 16:55

SeinopSys

8,787
10
62
110

Thanks very much. Regarding the Pseudo class, that was informative. I'll use a CSS transition :( – Lior Elrom Apr 18 '13 at 17:04

score 1 · Answer 2 · answered Apr 18 '13 at 18:55

1

Could you use .prev()?

$(".block").prev().animate();

Example: http://jsfiddle.net/charlescarver/EkW4z/

answered Apr 18 '13 at 18:55

Charlie

11,380
19
83
138

In your example, it uses classes to reposition an element which can be also a solution however, it's important to know, as @DJDavid98 wrote, that before and after are NOT part of the DOM and therefor can't be modified. – Lior Elrom Apr 18 '13 at 19:41
@Lior Not exactly. You do not need to use classes on the elements, I only used them to style it. – Charlie Apr 18 '13 at 23:26
it uses the animation() function and working fine BUT without manipulating on a Pseudo class. The prev() function used for tracking the preceding sibling of each of its elements but not more than that. Anyway, thanks a lot for putting your time in to it. – Lior Elrom Apr 19 '13 at 00:04

How to animate or timing a Pseudo class using jQuery

2 Answers2