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

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

1 个答案: