更改屬性當懸停與動畫

Question

我有data-img屬性在我的鏈接，當我懸停我的鏈接，我的主要形象正在改變，但我想改變與淡入淡出動畫如何做到這一點？

HTML

<div class="tur-list-box">     
    <div class="tur-list-content"> 
    <figure> 
     <img data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası" > 
    </figure><!-- tur resim-->  
    </div><!-- tur list content--> 
    <div class="tur-list-toggle"> 
    <ul class="list-unstyled"> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg"> 
      Kakava (Hıdırellez) Şenlikleri Alaçatı 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a> 
     </li> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu 
     <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a> 
     </li> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA.jpg">Adana Portakal Çiçeği Karnavalı Isparta 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a>   
     </li> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Gül Hasadı Ve Göller Yöresi Turları 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a> 
     </li> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja.jpg">Manisa Mesir Macunu Şenliği Turu 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a> 
     </li> 
     <li> 
     <a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Uçaklı Festival Turları 
      <i class="fa fa-chevron-right" aria-hidden="true"></i> 
     </a> 
     </li> 
    </ul> 
    </div><!-- acilir kapanir alan--> 
</div><!-- tur list box--> 

CSS

.tur-list-box{ 
    width:250px; 
    height:400px; 
} 
.tur-list-box img{ 
    width:250px; 
    height:110px; 
} 

JS

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

    } 
); 

click to see my work on codepen

Answer 1

你之前和你的IMG加ATTR SRC後添加淡入/淡出。請嘗試

$(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").fadeOut(250,function(){ 
 
     $(this).parents(".tur-list-box").find("figure img").attr("src",getAttr); 
 
     $(this).parents(".tur-list-box").find("figure img").fadeIn(250) 
 
     }) 
 
    }, 
 
    function(e) { 
 
     
 
    } 
 
);

.tur-list-box{ 
 
    width:250px; 
 
height:400px; 
 
} 
 
.tur-list-box img{ 
 
width:250px; 
 
    height:110px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    
 
    <div class="tur-list-box"> 
 
       
 
       <div class="tur-list-content"> 
 
        <figure> 
 
         <img data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg" class="lazy" src="img/assets/placeholder.png" data-default="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_ucakli-karadeniz-ve-batum-turu_UxeYSE2jMrrQcp9gAy6y.jpg" alt="tur sayfası" > 
 
        </figure><!-- tur resim--> 
 

 

 
       </div><!-- tur list content--> 
 

 
       <div class="tur-list-toggle"> 
 
        <ul class="list-unstyled"> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Kakava (Hıdırellez) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA.jpg">Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja.jpg">Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li> 
 
        </ul> 
 
       </div><!-- acilir kapanir alan--> 
 
       
 
       </div><!-- tur list box--> 
 
    
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
    </script> 
 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.3/jquery.lazy.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.3/jquery.plugins.min.js"></script> 
 
</body> 
 
</html>

Answer 2

入住這Codepen

您將需要幾個小變化

1）在懸停加個班說.animate它具有以下CSS動畫

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

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

2）除了這個.mouseout，我們還需要刪除.animate類。

玩的時間來滿足您的要求。如果您有任何疑問，請告知我