jquery - ブートストラップの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");
});