逐步将引导程序的 img 圆圈过渡到 img 圆形

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