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

  • Z时代
  • 2024-01-10
  • 分类：问答

我是JavaScript新手。如何淡入淡出并改进我当前的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:[email protected]"></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>

任何帮助，将不胜感激，我一直停留在它的年龄。

回答：

$(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 的全部内容， 来源链接： utcz.com/qa/259558.html

回到顶部