• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:Clarke 5次浏览

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)