我的 .img-area div 中有一张图片，我的 img 标签有 data-list-1 和 data -list-2attribute。当我将鼠标悬停在我的 .img-area img div 上时，我的图像必须与属性 data-list-1 和 交换data-list-2具有淡入淡出效果，当我悬停时它必须与默认 img 交换。
我得到属性和 src 但我不能用淡入淡出效果改变每张图片
你可以在demo上看到我的作品
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
$(".show").html("Default image: "+defaultImg+"<br>Data 1 img:"+data_1 +"<br/>Data 2 img:"+ data_2);
});
});.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>最佳答案
您可以尝试使用 JQuery 动画。
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
parentDiv.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_1)}).animate({ opacity: 1 }, 3000).animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_2)}).animate({ opacity: 1 },3000);
elem.animate({"src":data_1},"slow");
});
});.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>已编辑
var i =0;
var timer;
$(function(){
$(".img-area img").on("mouseover",function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
var imageList = [data_1,data_2,data_1]
myanimation(parentDiv,elem,imageList,defaultImg);
});
});
var myanimation = function(parentElem,elem,imageList,defaultimage)
{
if(i <imageList.length)
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",imageList[i])}).animate({ opacity: 1 }, 3000);
timer = setInterval(function(){ i++;
myanimation(parentElem,elem,imageList,defaultimage) }, 6000);
}
else
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",defaultimage)}).animate({ opacity: 1 }, 3000);
}
}.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>关于javascript - 悬停时使用淡入淡出效果交换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41331700/