交換圖像時懸停與淡入淡出效果

我在.img-area DIV有一個形象，我img標籤有data-list-1和data-list-2 attribute.When我在我的.img-area img格懸停我的形象，必須用屬性data-list-1和data-list-2有淡入淡出效果，當我換h it它必須與默認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>

來源

2016-12-26 ani_css

你需要兩個圖像，一個在另一個之上，比淡出，在上 –

你是什麼意思？我有一個圖像，我不能使用data-list-x屬性更改圖像的src？ –

「.show」元素在哪裏？您是否希望將原始圖像淡入以顯示「數據」圖像，然後返回？ – rabelloo

您可以用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>

來源

2016-12-26 13:19:15 Deep

這是一個很好的例子，如果我有'data-list-3'和' data-list-4'而不是我必須做的事情？我有'data-list-3'和'data-list-4'，這個列表可以是空的或不可以幻燈片？ –

，我想有一個小錯誤..當我徘徊圖像必須是默認和幻燈片必須完成 –

如果你有超過1個數據屬性，我會建議你把圖像src在一個數組，然後調用該函數動畫逐個。第二個不是bug，需求本身沒有實現。您可以在mouseout事件中輕鬆完成此操作。 – Deep

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">

來源

2016-12-26 13:10:23

交換圖像時懸停與淡入淡出效果

回答

相關問題