Question

嘿stackoverflow偷看。我仍然试图弄清楚这个网站如何对我施以怜悯

我的jQuery / CSS / HTML灯箱项目出了问题。

代码要求动画在点击IMG时淡入。

它没有问题，但当我关闭它时，它再次淡入然后关闭。

＆＃13;

/* Kode så Js læser alt HTML før den går igen */
$(function () {
  "use strict";
  $(".gallery").each(function (index, element) {
    //aktivere funktionen der animere galleriet
    lightBox(element);
  });
  function lightBox(element) {
    $(element).find('li a').on('click', function (e) {
      //lad være med at følge linket
      e.preventDefault();
      //find attributten til href
      var href = $(this).attr('href');
      //img med sti
      var img = "<img src='" + href + "'>";
      //Luk knap
      var inner = "<div class='fa fa-times-circle'></div>";
      // Skab lightbox indhold
      var content = $("<div class='lightBoxContent fadeIn'>" + img + inner + "<div>");
      //indsæt indholdet af lightbox
      $('body').append(content);
            
      // vælg $() lukke knappen
      var closeButton = $('.fa-times-circle');
      //funktion som lukker lightbox
      closeLightBox(content, closeButton);
      //skaber den box som udtoner hovedindholdet
      $('body').addClass('background fadeIn');
    });
  }
  // funktion der lytter om en css animation er slut
  function aniEnd(elm) {
    // elm er det element der animere
    elm.one('webkitAnimationEnd oanimationend msAnimationend animationend',
    //når animationen slutter
    function() {
      //hvis elm har klasserne "lightboxcontent og fadeout
      if (elm.hasClass('lightBoxContent fadeOut')) {
        // fjern lightbox galleriet
        $(elm).remove();
        // fjern baggrunds laget / farven
        $('body').removeClass("background fadeOut");
      }
    });
  }
  // funktionen som tager 2 parametere
  // content      : div med klassen "lightboxcontent"
  // closeButton  : div med klasserne "fa fa times circle"
  function closeLightBox(content, closeButton) {
            
    closeButton.on('click', function() {
      // animere baggrundslaget i css : "body.fadeOut:after"
      $('body').removeClass('fadeIn').addClass('fadeOut');
      //animere lightbox indhold i css : "div.fadeIn"
      $(content).removeClass('fadeIn').addClass('fadeOut');
      // tjek at animation er færdig
      aniEnd(content);
    });
  }        
});

＆＃13;

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* border box sætter margin inden i div  */
}

main{
  width: 100%;
}

#gallery{
  width: 100%;
  float: left;
}

ul{
            
}

ul li{
  list-style-type: none;
  float: left;
  width: 33.3333%;
  text-decoration: none;        
}

ul li a figure img{
  width: 100%;
  display: block;
}

ul li a{
  text-decoration: none;
}

ul li a:hover figcaption{
  width: 40%
}

figcaption {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: center;
  font-size: 1.5rem;
  background-color: firebrick;
  color: white;
  border-radius: 20px 20px 20px 20px;
  transition: 1s;                
}

figcaption:hover {
  width: 40%;      
}

/* LightBox */

.lightBoxContent{
  content: "";
  display: table;
  z-index: 200;
  width: 30%;
  position: absolute;
  background-color: rgba(79,151,158,1.00);
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.lightBoxContent img{
  width: 100%;
}

/* FadeIn/Out animation */
@-webkit-keyframes fadeIn{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@-webkit-keyframes fadeOut{
  100%{opacity: 1;}
  0%{opacity: 0;}
}

/* Lukke Knappen med Font Awesome ico */

.lightBoxContent .fa.fa-times-circle{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 2rem;
  cursor: pointer;        
}

/* Fade in and out */
/* Lightbox content fade */
.lightBoxContent.fadeIn{
  animation: fadeIn 2s;
}

.lightBoxContent.fadeOut{
  animation: fadeOut 2s;
}

/* Background fade  */
body.background.fadeIn:after{
  animation: fadeIn 2s forwards;
}

body.background.fadeOut:after{
  animation: fadeOut 2s forwards;
}

.background:after{
  content: "";
  display: table;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.50);
  position: absolute;
}

.clear{
  content:"";
  display: block;
  clear: both;
}

main ul.gallery{
  position: relative;
}

main ul.gallery li{width: 33.3333%;float: left;list-style-type: none;}
main ul.gallery li:after{content:"";display: table;clear: both;}
main ul.gallery li a{display: block;width: 100%;}
main ul.gallery li a figure{}
main ul.gallery li a figure img{display: block;width: 100%;}
main ul.gallery li a figure figcaption{}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="main.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/main.js"></script>
    <title>Lightbox</title>
  </head>
  <body>
    <!-- emmet kode til billedgalleri
   main>ul>li*3>a[href=img/billed$.jpg]>figure>img[src=img/billed$.jpg alt="billed$"]+figcaption{billed $}
    -->
    <main>
       <div id="gallerybox">
       
        <ul class="gallery">
            <li>
                <a href="img/billed1.jpg">
                    <figure>
                        <img src="img/billed1.jpg" alt="billed1">
                        <figcaption>billed 1</figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <a href="img/billed2.jpg">
                    <figure>
                        <img src="img/billed2.jpg" alt="billed2">
                        <figcaption>billed 2</figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <a href="img/billed3.jpg">
                    <figure>
                        <img src="img/billed3.jpg" alt="billed3">
                        <figcaption>billed 3</figcaption>
                    </figure>
                </a>
            </li>
        </ul>
        </div>
    </main>
  </body>
</html>

＆＃13;

感谢

jQuery Lightbox动画FadeIn / Out

0 个答案: