jquery - 将 bootstrap 的 img-circle 逐渐过渡到 img-rounded

Question

有没有办法让图像的类别从 img-circle 变为 img-rounded 不是立即而是通过鼠标悬停逐渐改变？

我知道它必须通过 javascript/jquery 完成，因为没有其他方法可以更改对象的类

Answer 1

既有纯 CSS 也有基于 jQuery 的解决方案。下面的代码，以及http://jsfiddle.net/technotarek/K52j4/上两者的工作示例：

jQuery

$(".js").hover(function() {
    $(this).animate({
        "border-radius": "6px"
    });
}, function() {
    $(this).animate({
        "border-radius": "500px"
    });
});​

CSS3（无需 javascript；仅适用于现代浏览器）

img.css {
    -webkit-transition:border-radius 0.8s linear;
    -moz-transition:border-radius 0.8s linear;  
    -o-transition:border-radius 0.8s linear;      
    transition:border-radius 0.8s linear;  
}
    img.css:hover {  
        border-radius: 6px;
    }

Answer 2

是的，您可以使用 jquery 来完成这项工作，就像这样：

$("img[class='img-circle']").hover(function(){
      $(this).removeClass("img-circle").addClass("img-rounded");
   },function(){
      $(this).removeClass("img-rounded").addClass("img-circle");
});