使用JQuery，如何通过fadeIn缓慢更改悬停图像？

Question

码：

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

更新：

这样的事情可以工作：

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

});

希望这对您有帮助