如何淡入和淡出并改进我当前的JavaScript
16lz
2021-01-22
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:+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>
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
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");
});
});
更多相关文章
- 等待执行所有ajax回调的最佳解决方案
- 【问题解决方案】ImportError: No module named 'pygal'
- Python 黏包及黏包解决方案
- 在Python中TypeError: object() takes no parameters新手问题的
- 无法安装ndg-httpsclient或者我的解决方案错误
- Linux无法连接网络解决方案
- 本人新手,询问一下有谁用过lameditor-1.0?,它是linux下的软件,我在
- Media-S 简介(一个开源的DRM解决方案)
- AppScan安全问题解决方案