Javascript 使覆盖层淡入淡出较慢

Javascript 使覆盖层淡入淡出较慢,javascript,html,css,Javascript,Html,Css,在这个网站上,我已经能够获得下面的HTML、CSS和Javascript <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript"> function getTarget(event){ target = (typ

在这个网站上,我已经能够获得下面的HTML、CSS和Javascript

        <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">

function getTarget(event){
    target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
    return target;
}

document.onclick = function(event){
    var target = getTarget(event);
    if(target.id == ""){
        var overlay = document.getElementById('overlay');
        var specialBox = document.getElementById('specialBox');
        var button = document.getElementById('qualityButton');
        overlay.style.display = "none";
        specialBox.style.display = "none";
        button.style.color="#000000";
    }

}


function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    var button = document.getElementById('qualityButton');
    overlay.style.opacity = .7;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
        button.style.color="#000000";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
        button.style.color="#ff0000";
    }
}
</script>

<style type="text/css">

div#overlay {
    display: none;
    z-index: 2;
    background: #A9A9A9;
    position: fixed;
    width: 879px;
    height: 291px;
    top: 50px;
    left: 0px;
    text-align: center;
}
div#specialBox {
    display: none;
    position: fixed;
    z-index: 3;
    width: 719px; 
    height: 215px;
    top: 88px;
    left: 80px;
    background: #FFF;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left: 24px;
}
</style>

<style type="text/css">
    .btn {
        cursor:pointer;
        font-size:24px;
        border:none;
        color:#000
}
    .btn:hover{ 
    color:#F00; 
    }
</style>

<style type="text/css">
    .x {
        background-color:white;
        cursor:pointer;
        font:Arial;
        font-size:14px;
        color:red;
        z-index: 4;
        position: fixed;
        top: 92px;
        left: 766px;
    }
</style>

</head>

<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
  <button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
  <button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->



</div>
</body>
</html>

无标题文件
函数getTarget(事件){
target=(typeof window.event==“未定义”)?event.target:window.event.src元素;
回报目标;
}
document.onclick=函数(事件){
var目标=getTarget(事件);
如果(target.id==“”){
var overlay=document.getElementById('overlay');
var specialBox=document.getElementById('specialBox');
var button=document.getElementById('qualityButton');
overlay.style.display=“无”;
specialBox.style.display=“无”;
button.style.color=“#000000”;
}
}
函数toggleOverlay(){
var overlay=document.getElementById('overlay');
var specialBox=document.getElementById('specialBox');
var button=document.getElementById('qualityButton');
overlay.style.opacity=.7;
if(overlay.style.display==“块”){
overlay.style.display=“无”;
specialBox.style.display=“无”;
button.style.color=“#000000”;
}否则{
overlay.style.display=“块”;
specialBox.style.display=“块”;
button.style.color=“#ff0000”;
}
}
分区覆盖{
显示:无;
z指数:2;
背景:#A9A9;
位置:固定;
宽度:879px;
身高:291px;
顶部:50px;
左:0px;
文本对齐:居中;
}
分区#专用箱{
显示:无;
位置:固定;
z指数:3;
宽度:719px;
身高:215px;
顶部:88px;
左:80px;
背景:#FFF;
}
div#wrapper{
位置:绝对位置;
顶部:0px;
左:0px;
左侧填充:24px;
}
.btn{
光标:指针;
字体大小:24px;
边界:无;
颜色:#000
}
.btn:悬停{
颜色:#F00;
}
.x{
背景色:白色;
光标:指针;
字体:Arial;
字体大小:14px;
颜色:红色;
z指数:4;
位置:固定;
顶部:92px;
左:766px;
}
X
最高质量
当我点击按钮时,叠加会在一个快速闪光中出现和消失。我希望它以500毫秒为例,以便创建淡入/淡出效果

我已尝试添加以下脚本,但没有任何运气:

<script>
$(document).ready(function(){
  $(".x").click(function(){
    $("p").toggleOverlay(500)
  });
  $(".btn").click(function(){
    $("p").toggleOverlay(500);
  });
});
</script>

$(文档).ready(函数(){
$(“.x”)。单击(函数(){
$(“p”)。切换覆盖(500)
});
$(“.btn”)。单击(函数(){
美元("p").toggleOverlay(500美元);;
});
});
有谁能告诉我我做错了什么,以及如何解决这个问题

事先非常感谢你


James

尝试为按钮指定
过渡持续时间
样式,如下所示:

button .x{transition-duration:0.5s}
这应该可以解决问题。

尝试在切换覆盖()之前添加延迟(500)


$(文档).ready(函数(){
$(“.x”)。单击(函数(){
$(“p”).delay(500).toggleOverlay();
});
$(“.btn”)。单击(函数(){
$(“p”).delay(500).toggleOverlay();
});
});

如果您实际上正在使用jquery,这就是您想要的:

function toggleOverlay(){  
$('#overlay, #specialBox').fadeToggle(500);
}
去掉您添加的额外jquery,用上面的函数替换您的toggleOverlay函数


您错过了在
标记中获取jQuery库的机会,如下所示:
-第二次script@aldanux不幸的是,添加行仍然没有任何效果…尝试此操作时没有任何运气:(这是因为如果您修改元素的display属性,CSS3转换将不起作用。display属性不支持转换,如果您更改display属性,它还将中断该元素上的所有其他转换。@LifeOnlies谢谢您的评论。您对如何解决此问题有何建议?您好,谢谢对于您的答案!它部分起作用:如果我单击“质量”按钮使覆盖显示/消失,则淡入淡出是完美的。但是,单击“X”按钮或文档关闭覆盖将继续关闭它,而不产生任何淡入淡出效果。有什么线索可以帮助我修复吗?谢谢!
function toggleOverlay(){  
$('#overlay, #specialBox').fadeToggle(500);
}