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

我是javascript新手

我想点击

.direction

使我的

.lightboxbg

和

.directions lightbox

淡入淡出。 单击我的

.lightboxbg

时，我希望我的

.lightboxbg

和

方向lightbox

淡出

我还想确保当我的

.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>

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

$（文档）.ready（函数（）{
$（'.directions'）。单击（函数（）{
$（'.lightboxbg，.directionslightbox'）.fadeIn（800）；
});
$（'.lightboxbg'）。单击（函数（）{
$（'.lightboxbg，.DirectionsLightboxBG'）.fadeOut（800）；
});
});

---

如果您能提供任何帮助，我将不胜感激，我已经在上面呆了很长时间。

当它的显示：none event Handler（无事件处理程序）无法连接时。对了，这是否意味着我应该取出这个？目前的脚本工作，但我想只是把在我提到的“.contactlist”这是伟大的，但“.contact”列表不隐藏时淡入淡出显示时，我认为它需要一个额外的行。伟大的作品

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

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