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