Animate pseudo class in jQuery

Question

Hi

Is it possible to animate a pseudo class when it is activated, for example:

I have to the following in my css:

#gallery a span {
    border:#006553 3px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:89px;
    width:89px;
}

#gallery a:hover span {
    border:#f3bd2f 6px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:83px;
    width:83px;
}

I want to animate the transformation when a user hovers over the link, i.e. the span border must grow.

Does anyone if this is possible?

Thanks in advance.

// edit:

I have looked at the 'animateToSelector' jQuery Plug-in, and used the following jQuery function call, but there is no animation, the border just jumps between the specified styles above.

Here is my function call:

$("#gallery a span").animateToSelector({selectors: ["#gallery a:hover span"], properties: ['border'], events: ['mouseover','mouseout'], duration: 3000});

Can anyone see something I'm missing?

Answer 1

why not just bind the animation on mouseover ?

$("#gallery a").mouseover(function(){
  var span = $(this).children("span");
  //animate something on the span
});

Answer 2

This article from James Paolsey might help you achieve such a transformation.

Answer 3

jQuery UI provides such a function which will animate an element from one class to another

$(".gallery a").mouseover(function(){  
  $(this).switchClass('newClass', 'anotherNewClass', 1000);
})