使用淡入淡出效果悬停时交换图像答案

【问题标题】：Swap image when hover with fade effect使用淡入淡出效果悬停时交换图像
【发布时间】：2016-12-26 13:01:26
【问题描述】：

我的.img-area div 中有一张图片，我的img 标签有data-list-1 和data-list-2attribute。当我将鼠标悬停在.img-area img div 上时，我的图片必须与属性data-list-1和@987654328 交换@带有淡入淡出效果，当我悬停时它必须与默认 img 交换。

我获得了属性和 src，但我无法使用淡入淡出效果更改每个图像

你可以在演示中看到我的作品

$(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>

【问题讨论】：

你需要两个图像，一个在另一个之上，而不是淡出，在上部
你是什么意思？我有一张图片，我不能用 data-list-x 属性更改图片的 src 吗？
'.show' 元素在哪里？您是否希望将原始图像淡化为同时显示 data 图像，然后再返回？
检查this fiddle希望对您有帮助
是的@rabelloo，正如你所说的

标签： javascript jquery html css image

【解决方案1】：

你可以试试 JQuery animate。

$(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>

【讨论】：

这是一个很好的例子，如果我有data-list-3 和data-list-4，我该怎么办？我有data-list-3 和data-list-4，这个列表可以是空的，也可以不是幻灯片？
我猜有一个小错误..当我悬停图像必须是默认值并且幻灯片必须完成时
如果你有超过 1 个数据属性，我建议你将图像 src 放入一个数组中，然后调用该函数一个一个地进行动画处理。第二个不是bug，需求本身没有实现。您可以在 mouseout 事件中轻松做到这一点。
那我该如何替换我的html和js呢？
我会等的。

【解决方案2】：

window.onload=function(){
 imgs=document.getElementsByTagName("img");
 for(i=0;i<imgs.length;i++){
    img=imgs[i];
    container=document.createElement("div");
    img.parentNode.appendChild(container);
    container.appendChild(img);
    img2=document.createElement("img");
    img2.src=img.getProperty("secondsrc");
    container.appendChild(img2);
    img2.id="secondimg";
    img.id="firstimage";
    container.style.width=img.width;
    container.style.height=img.height;
    }};

css:

#firstimage{
  z-index:3;
  position:absolute;
  opacity:1;
  transition: all ease 2s;
  }
  #firstimage:hover{
  opacity:0;
  }

html:

<img src="url" secondsrc="url2">

【讨论】：