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

I'm new to javascript.

我是javascript的新手。

I want a click on .direction to make my .lightboxbg and .directionslightbox fade in. When my .lightboxbg is clicked I want my .lightboxbg and .directionslightbox to fade out.

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

I also want to make sure when my .lightboxbg and .directionslightbox has faded in that my .contactlist hides but shows again when it has faded out.

我还想确保我的.lightboxbg和.directionslightbox在我的.contactlist隐藏时已经消失，但是当它已经淡出时再次显示。

My HTML:

我的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:[phone]"></a>
      </li>
      <li style="background-image:url('email.png');" class="">
        <a href="mailto:[e-mail]"></a>
      </li>
    </ul>
  </nav>
</div>

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

My CSS:

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

My current JS:

我现在的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>

Any help would be appreciated, I have been stuck on it for ages.

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

1 个解决方案

#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");
  });
});