CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

Change attribute when hover with animated

I have data-img attribute in my links and when I hover my links, my main image is changing but I want change to with fade animate how to do that ?

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

Upvotes: 1

Views: 199

Answers (2)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

Check this Codepen

You will need couple of small changes

1) On hover add a class say .animate which has the following CSS animation

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

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

2) Along with this on .mouseout we need to remove the .animate class as well.

Play around with the timings to match your requirements. Let me know if you have any doubts

Upvotes: 0

P. Frank
P. Frank

Reputation: 5745

You can add a fadeIn/fadeOut before and after add attr src in your img. Please try

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

Upvotes: 1

Related Questions