使用JQuery如何通過fadeIn緩慢地更改圖像？

Question

CODE：

.icon_right { 
    background-position: -235px -95px; 
    background-repeat: no-repeat; 
    float: right; 
    height: 34px; 
    margin-right: 16px; 
    margin-top: 15px; 
    position: relative; 
    width: 22px; 
    z-index: 200; 
} 
.icon_base { 
    background-image: url("/sprite.png"); 
} 

<span class="icon_base icon_right"></span> 

當icon_right懸停我要慢慢改變了使用淡入/淡出圖像。圖像處於精靈狀態。我如何使用jquery完成此操作？

我試圖在icon_right CSS使用這樣的：

  -webkit-transition: opacity .50s ease-in-out; 
-moz-transition: opacity .50s ease-in-out; 
-ms-transition: opacity .50s ease-in-out; 
-o-transition: opacity .50s ease-in-out; 
transition: opacity .50s ease-in-out; 

UPDATE：

像這樣可以工作：

transition: 10s background-color; 

但是我怎麼做到這一點的後臺位置？

Answer 1

<span id="icon-holder" class="icon_base icon_right"></span> 

$('#icon-holder').hover(function(){ 

    $('#icon-holder').removeClass('icon_right', 500); 

}); 

希望這有助於你