javascript - 使用 JQuery 如何通过淡入淡出缓慢地更改悬停时的图像？

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

});

希望这可以帮助你