文章/答案/技术大牛

发布

社区首页 >问答首页 >动画悬停时更改属性

问动画悬停时更改属性
EN

Stack Overflow用户

提问于 2016-10-25 13:27:56

回答 2查看 180关注 0票数 1

我有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;
}

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

    }
);

单击此处可查看我在codepen上的工作

html

css

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-10-25 14:09:24

您可以在img中添加attr之前和后面添加fadeIn/fadeOut。请尝试

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

票数 1

Stack Overflow用户

发布于 2016-10-25 14:10:00

检查这个科德芬

你需要几个小的改变

1)在悬停时添加一个类，比如.animate，它具有以下CSS动画

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

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

2)在.mouseout上，除此之外，我们还需要删除.animate类。

按照你的要求在时间上四处游玩。如果你有任何疑问，请告诉我

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40241300

复制

相似问题

问动画悬停时更改属性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画悬停时更改属性EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画悬停时更改属性
EN