Using JQuery how can I change an image on hover slowly via fadeIn?

Using JQuery how can I change an image on hover slowly via fadeIn?

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>
When icon_right is hovered I want to slowly changed the image using
fadein/fadeout. The images are in sprite. How can i complete this using
jquery?