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

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

本文关键字：悬停 图像 缓慢 JQuery 何通过 fadeIn 使用      更新时间：2023-09-26

代码：

.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悬停时，我想使用淡入/淡出慢慢更改图像。图像在sprite中。如何使用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;

但是我该如何做背景工作呢？

<span id="icon-holder" class="icon_base icon_right"></span>
$('#icon-holder').hover(function(){
  $('#icon-holder').removeClass('icon_right', 500);
});

希望这能帮助您

相关文章：