С помощью GreenSock по autoAlpha собственность, чтобы показать и скрыть изображения при наведении


Screenshot of light and dark icons

У меня есть шесть плиток, что я анимация при наведении. Плитки инверт от светлого до темного при наведении курсора мыши и обратно в свет на mouseout. Моя цель-для инверсии плитку произойдет органично и беспрепятственно. На данный момент есть баг, при наведении на само изображение, а не просто плитка до н. э. мышь выходит из плитки, когда на изображении.

Я чувствую, что мой код очень однообразная, и я надеюсь, чтобы уменьшить количество линий путем добавления переменных к функции, которая позволит мне использовать логику для отображения или скрытия изображений.

(function($) {

 // Set variables
    var $pain1 = $("#pain1"),
     $pain2 = $("#pain2"),
     $pain3 = $("#pain3"),
     $pain4 = $("#pain4"),
     $pain5 = $("#pain5"),
     $pain6 = $("#pain6");


 function hideDarkIcons(){
  // Set variables
     var p1 = $("#pain1 .pp-dark"),
      p2 = $("#pain2 .pp-dark"),
      p3 = $("#pain3 .pp-dark"),
      p4 = $("#pain4 .pp-dark"),
      p5 = $("#pain5 .pp-dark"),
      p6 = $("#pain6 .pp-dark");

     var tl = new TimelineLite();

      tl.to(p1, 0, {autoAlpha:0}, 'hideDark'),
      tl.to(p2, 0, {autoAlpha:0}, 'hideDark'),
      tl.to(p3, 0, {autoAlpha:0}, 'hideDark'),
      tl.to(p4, 0, {autoAlpha:0}, 'hideDark'),
      tl.to(p5, 0, {autoAlpha:0}, 'hideDark'),
      tl.to(p6, 0, {autoAlpha:0}, 'hideDark');
 }

 //Call function on load
 hideDarkIcons();


 $pain1.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain1 .pp-dark"),
   l1 = $("#pain1 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain1.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain1 .pp-dark"),
   l1 = $("#pain1 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });



 $pain2.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain2 .pp-dark"),
   l1 = $("#pain2 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain2.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain2 .pp-dark"),
   l1 = $("#pain2 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });


 $pain3.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain3 .pp-dark"),
   l1 = $("#pain3 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain3.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain3 .pp-dark"),
   l1 = $("#pain3 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });


 $pain4.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain4 .pp-dark"),
   l1 = $("#pain4 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain4.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain4 .pp-dark"),
   l1 = $("#pain4 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });


 $pain5.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain5 .pp-dark"),
   l1 = $("#pain5 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain5.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain5 .pp-dark"),
   l1 = $("#pain5 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });


 $pain6.mouseenter(function(event) {
  // Set variables
  var d1 = $("#pain6 .pp-dark"),
   l1 = $("#pain6 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeIn'),
   tl1.to(l1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeIn');
 });

 $pain6.mouseout(function(event) {
  // Set variables
  var d1 = $("#pain6 .pp-dark"),
   l1 = $("#pain6 .pp-light");
    
  var tl1 = new TimelineMax();
   tl1.to(d1, 0, {autoAlpha: 0, ease:Power3.easeOut}, 'fadeOut'),
   tl1.to(l1, 0, {autoAlpha: 1, ease:Power3.easeOut}, 'fadeOut');
 });



})(jQuery);
/*** PAIN POINTS ***/
.painpoint {
 border: 1px solid $brand-color-6;
 margin: 0 auto;
 border-radius: 20px;
 box-shadow: 0 3px 5px 0 rgba(0,0,0,0.08);
  transition: all 0.3s ease-in-out;
  min-height: 20em;
 
 &:hover {  
  box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
  background-color: $brand-color-2;
  cursor: pointer;

  img {
   background-color: #fff;
   transition: all 0.3s ease-in-out;
   //mix-blend-mode: multiply;
  }

  p {
   color: #fff;
   transition: all 0.3s ease-in-out;
  }
 }

  p {
   position: absolute;
   left: 0;
   bottom: 25%;
   font-family: $dinot;
   font-weight: 700;
   font-size: 1.2em;
  color: $brand-color-1;
  margin: 0 auto;
  padding: 1em 4em;
  text-align: center;
  }

  img {
   position: absolute;
   left: 37.5%;
   top: 15%;
  background-color: $brand-color-1;
  padding: 1em;
  margin: 0 auto;
  border-radius: 20px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
        <div class="row">
            <div class="col-lg-4">
                <div id="pain1" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon1.png"/>
                    <img class="pp-dark" src="/dist/images/icon1-dark.png"/>
                    <p>How do I know what roles I will hire for in the future?</p>
                </div>
            </div>
           <div class="col-lg-4">
                <div id="pain2" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon2.png"/>
                    <img class="pp-dark" src="/dist/images/icon2-dark.png"/>
                    <p>Do I have the right talent to lead my company through digital transformation?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain3" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon3.png"/>
                    <img class="pp-dark" src="/dist/images/icon3-dark.png"/>
                    <p>How can I better engage the workforce today and plan for tomorrow?</p>
                </div>
            </div>
        </div>
        <div class="row">
           <div class="col-lg-4">
                <div id="pain4" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon3.png"/>
                    <img class="pp-dark" src="/dist/images/icon3-dark.png"/>
                    <p>Will robots replace me at work?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain5" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon1.png"/>
                    <img class="pp-dark" src="/dist/images/icon1-dark.png"/>
                    <p>How do I know what digital skills I need to develop?</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="pain6" class="painpoint">
                    <img class="pp-light" src="/dist/images/icon2.png"/>
                    <img class="pp-dark" src="/dist/images/icon2-dark.png"/>
                    <p>I want to learn more, but where do I begin?</p>
                </div>
            </div>
        </div>
    </section>



Комментарии
1 ответ

Я надеюсь, что я правильно понимаю вашу проблему и код:


  • есть светлая и темная версия изображения

  • на мыши над темной версии должны исчезать

  • на мыши из темной версии должны исчезать


Итак, мой вопрос: Что тебе нужно все в JavaScript?

Вы можете легко достичь этого с помощью CSS только - нет необходимости в jQuery или "ГСАП":



.painpoint {
position: relative;
}

.img {
position: absolute;
}

.img.m--dark {
opacity: 0;
transition: all 0.3s ease-in-out;
}

.painpoint:hover .img.m--dark:last-child {
opacity: 1;
}


<div class="painpoint">
<img class="img" src="http://via.placeholder.com/350x150"/>
<img class="img m--dark" src="http://via.placeholder.com/350x150/000000"/>
</div>


Надеюсь, это упростит ваш код.

2
ответ дан 7 марта 2018 в 05:03 Источник Поделиться