javascript - 我如何淡入和淡出并改进我当前的 JavaScript

Question

我是 javascript 的新手。

我想点击 .direction 使我的 .lightboxbg 和 .directionslightbox 淡入。 单击我的 .lightboxbg 时，我希望我的 .lightboxbg 和 .directionslightbox 淡出。

我还想确定我的 .lightboxbg 和 .directionslightbox 何时消失，因为我的 .contactlist 隐藏但再次显示已经淡出。

我的 HTML:

<div class="contactmenu">
  <nav>
    <ul class= "contactlist">
      <li style="background-image:url('directions.png');" class="directions">
      </li>
      <li style="background-image:url('callicon.png');" class="">
       <a href="tel:+44(0)1392495573"></a>
      </li>
      <li style="background-image:url('email.png');" class="">
        <a href="mailto:matt050681@gmail.com"></a>
      </li>
    </ul>
  </nav>
</div>

<div class="lightboxbg"></div>
<div class="directionslightbox"></div>

我的 CSS:

div.lightbox{
    position: absolute;
    top: 25%;
    left: 45%;
    background: center no-repeat #fff;
    width: 400px;
    height: 600px;
    padding: 10px;
    z-index: 1001;
    display: none;
}
div.directionslightbox{
    position: absolute;
    top: 10%;
    left:18%;
    background:url("../Map_Background_Web.png"); center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 65%;
    height: 80%;
    padding: 10px;
    z-index: 1001;
    display: none;
}
div.lightboxbg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    z-index: 1000;
    display: none;
}

我目前的 JS:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.directions').click(function() {
        $('.lightboxbg, .directionslightbox').fadeIn(800);
    });
    $('.lightboxbg').click(function() {
        $('.lightboxbg, .directionslightbox').fadeOut(800);
    });
});
</script>

任何帮助将不胜感激，我已经坚持了很长时间。

Answer 1

$(document).ready(function(){
  $(document).on("click",".directions", function() {
  $('.lightboxbg, .directionslightbox').fadeIn(800);
  $('.contactlist').fadeOut("slow");
  });
  $(document).on("click",".lightboxbg", function() {
  $('.lightboxbg, .directionslightbox').fadeOut(800);
  $('.contactlist').fadeIn("slow");
  });
});