CODEWITHSUNDEEP
jquerycssjquery-animatepseudo-class
Lior Elrom
Lior Elrom

Reputation: 20862

How to animate or timing a Pseudo class using jQuery

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?

Upvotes: 1

Views: 550

Answers (2)

Charlie
Charlie

Reputation: 11777

Could you use .prev()?

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

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

Upvotes: 1

SeinopSys
SeinopSys

Reputation: 8937

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;
}

Upvotes: 1

Related Questions