將引導程序的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"); 
});