Javascript 使用动画鼠标悬停时更改属性

我的链接中有

数据img

属性，当我将链接悬停时，我的主图像正在更改，但我想更改为淡入淡出动画如何做到

HTML

JS

---

您可以在img中的add attr src前后添加淡入淡出/淡出。请试一试

$（函数（）{
$（“.lazy”）.lazy（）；
});
$（“.tur列表框”）.hover（函数（）{
$（this.find（“.tur list toggle”）.stop（）.slideDown（）；
$（this）.find（“.open-tur-toggle”）.stop（）.removeClass（“fa-chevron-down”）.addClass（“fa-chevron-up”）；
}，功能（e）{
var getDefaultImg=$（this.find（“图img”）.attr（“数据默认”）；
$（this）.find（“figure img”）.fadeIn（2000，function（）{
$（this.attr（“src”，getDefaultImg）；
})
$（this.find（“.tur list toggle”）.stop（）.slideUp（）；
$（this）.find（“.open-tur-toggle”）.stop（）.removeClass（“fa-chevron-up”）.addClass（“fa-chevron-down”）；
});
$（'.tur列表切换ul li a'）。悬停(
职能（e）{
e、 预防默认值（）；
var getAttr=$（this.attr（“数据img”）；
var img=$（this）.find（“图img”）；
$（this）.parents（“.tur列表框”）.find（“图img”）.fadeOut（250，function（）{
$（this）.parents（“.tur列表框”）.find（“图img”）.attr（“src”，getAttr）；
$（this）.parents（“.tur列表框”）.find（“图img”）.fadeIn（250）
})
},
职能（e）{
}
);
.tur列表框{
宽度：250px；
高度：400px；
}
.tur列表框img{
宽度：250px；
高度：110px；
}

文件








检查此项

你需要一些小的改变

1） 悬停时添加一个类，比如说
.animate
，该类具有以下CSS动画

.animate {
    animation-name: example;
    animation-duration: 1s;
}

@keyframes example {
    0%   {opacity: 1;}
    45%  {opacity: 0;}
    100% {opacity: 1;}
}

2） 除此之外，在
.mouseout
上，我们还需要删除
.animate
类

根据您的要求调整时间。如果您有任何疑问，请告诉我
您的钢笔坏了。你能更新它以便我们看到问题吗？你能再试一次吗？仍然不工作。。看起来是一样的，我请客。。codepen链接工作正常你有什么样的错误？我使用了OPs HTML。
.tur-list-box{
  width:250px;
  height:400px;
}
.tur-list-box img{
  width:250px;
  height:110px;
}

$(function() {
 $(".lazy").lazy();
});


$(".tur-list-box").hover(function(){
    $(this).find(".tur-list-toggle").stop().slideDown();
    $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
  },function(e){
     var getDefaultImg = $(this).find("figure img").attr("data-default");
    $(this).find("figure img").fadeIn(2000,function(){
      $(this).attr("src",getDefaultImg);
    })
    $(this).find(".tur-list-toggle").stop().slideUp();
    $(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
  });


$('.tur-list-toggle ul li a').hover(
    function(e) {
      e.preventDefault();  
      var getAttr = $(this).attr("data-img");
      var img = $(this).find("figure img");
      $(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
    },
    function(e) {

    }
);

.animate {
    animation-name: example;
    animation-duration: 1s;
}

@keyframes example {
    0%   {opacity: 1;}
    45%  {opacity: 0;}
    100% {opacity: 1;}
}