在本网站上提供N0ME,我已经能够获得下面的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>
单击按钮时,叠加显示并在一次快速闪烁中消失。我希望它采用例如500ms,以便创建淡入/淡出效果。
我尝试添加以下脚本没有任何运气:
<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").toggleOverlay(500)
});
$(".btn").click(function(){
$("p").toggleOverlay(500);
});
});
</script>
有人可以指导一下我做错了什么以及如何解决这个问题?
提前非常感谢你。
詹姆斯
答案 0 :(得分:1)
尝试将transition-duration
样式添加到按钮中,如下所示:
button .x{transition-duration:0.5s}
这应该可以解决问题。
答案 1 :(得分:1)
尝试在toggleoverlay()
之前添加延迟(500)<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").delay(500).toggleOverlay();
});
$(".btn").click(function(){
$("p").delay(500).toggleOverlay();
});
});
</script>
答案 2 :(得分:1)
如果您实际上正在使用jquery,这就是您想要的:
function toggleOverlay(){
$('#overlay, #specialBox').fadeToggle(500);
}
摆脱你添加的额外jquery,只需用上面的替换你的toggleOverlay函数。