Анимационный псевдокласс в jQuery

Question

Можно ли анимировать псевдокласс при его активации, например:

В моем 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;
}

Я хочу анимировать преобразование, когдапользователь наводит курсор на ссылку, то есть граница диапазона должна увеличиваться.

Кто-нибудь, если это возможно?

Заранее спасибо.

// edit:

Я посмотрел на jQuery-плагин animateToSelector и использовал следующий вызов функции jQuery, но анимации нет, граница просто переходит между указанными выше стилями.

Вот моя функцияПозвоните:

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

Кто-нибудь может увидеть то, что мне не хватает?

Answer 1

Эта статья от Джеймса Полси может помочь вам добиться такой трансформации.

Answer 2

jQuery UI предоставляет такую ​​ функцию , которая будет анимировать элемент из одного класса в другой

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

Answer 3

почему бы просто не связать анимацию при наведении мыши?

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