JQuery fade to pseudo classes ie:hover

Question

has anyone come accreoss a plugin or devised a way to fade to pseudo classes defined via css using jquery?

I can't find anything online that suggests there is a plugin that does what I'm thinking, which is kinda weird as I thought this would be a web designer's/dev's dream come true! So I can only assume it's not possible.

say we have

p:hover{opacity:0.6;}

<p>blah blah blah</p>

obviously this is just going to jump from fully opaque to 60% opaque, but if we were to use jquery like so;

$('p').hover(function(){
    $(this).animate({'opacity':0.6},400);
},function(){
    $(this).animate({'opacity':1},200);
});

We get a nice transition between fully and semi opaque.

What I would REALLY like to figure out is if jQuery can automagically do the transition to the :hover psuedo class defined in the style sheet.

Does jQuery (or javascript) have access to that data from the browser? If not, can the css file be read by javascript or jquery seperately? In either scenario, could jquery (given a few parameters) know that it should always animate to the :hover class?

Something like this? http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles — mrtsherman, Jan 27 '12 at 19:44
Without CSS?? Hm, changing CSS proprties with Javascript. I think CSS3 is much more natural here. — dfsq, Jan 27 '12 at 19:46
I like the jqueryUI idea. didn't know it could do that. But this doesn't use pseudo classes, just switches nicely between different classes — Umut, Jan 27 '12 at 19:47
decided to go with Mark's suggestion of using css transitions. Cheers — Umut, Jan 28 '12 at 00:43

score 0 · Answer 1 · answered Jan 27 '12 at 19:46

I'm not sure about automagically, but a hacky way to do it would be to have a placeholder element on the page that's styled as you want, but is otherwise hidden. Then when you want to animate an element to that style, get the placeholder element, get the properties you want from it using .css(propertyName), and pass those properties into the .animate() call on the element you wwant to change.

JQuery fade to pseudo classes ie:hover

1 Answers1