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

我想在用户将鼠标悬停在链接上时对转换进行动画处理，即跨度边框必须增大。

如果这可能的话有人吗？

提前致谢。

// 编辑：

我查看了 'animateToSelector' jQuery 插件，并使用了以下 jQuery 函数调用，但没有动画，边框只是在上面指定的样式之间跳转。

这是我的函数调用：

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

任何人都可以看到我丢失的东西吗？

Answer 1

jQuery UI 提供了这样一个函数 它将把一个元素从一个类动画到另一个类

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

Answer 2

为什么不直接在鼠标悬停时绑定动画？

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