我发现 JQuery 非常慢，所以我决定创建自己的 fadeIn 和 fadeOut 函数，这样我就可以像 jquery 一样轻松地调用它们。我已经完成一半了，因为它完全可以工作，但不幸的是，当我单击 fadeIn 时，它会不断重新淡入，当我单击 fadeOut 时，它会不断重新淡出。
我尝试使用显示:无；和 display: javascript 中的 block 样式，但仅适用于淡出。它现在可以在 IE6 + 7 上完全运行!!问题出在 css 内部。如果现在有人可以帮助我处理 javascript，我将非常感激。
这是我的代码:
HTML:
<html>
<body>
<a id="fadeI">FadeIn</a>
<a id="fadeO">FadeOut</a>
<div id="message"></div>
</body>
</html>
CSS:
<style>
#fadeI, #fadeO{
cursor: pointer;
margin-left: 10px;
zoom: 1;
}
#message{
background: url('pictures/iphone1.png') no-repeat;
width:90px;
height: 158px;
z-index: 1;}
</style>
Javascript:
<script>
window.onload = function() {
function fadeOut(id, seconds) {
var opacity = 1;
var interval = seconds * 10;
var outListener = null;
outListener = setInterval(function() {
opacity = fadeOutInterval(opacity, id, outListener);
} , interval);
}
function fadeOutInterval(opacity, id, outListener) {
opacity = opacity - 0.1;
setOpacity(id, opacity);
if(opacity < 0) {
clearInterval(outListener);
//document.getElementById(id).style.display = 'none';
}
return opacity;
}
function fadeIn(id, seconds) {
var opacity = 0;
var interval = seconds * 10;
var InListener = null;
InListener = setInterval(function() {
opacity = fadeInInterval(opacity, id, InListener);
} , interval);
}
function fadeInInterval(opacity, id, InListener) {
opacity = opacity + 0.1;
setOpacity(id, opacity);
if(opacity > 1) {
clearInterval(InListener);
}
return opacity;
}
function setOpacity(id, level) {
document.getElementById(id).style.opacity = level;
document.getElementById(id).style.MozOpacity = level;
document.getElementById(id).style.KhtmlOpacity = level;
document.getElementById(id).style.filter = "alpha(opacity="
+ (level * 100) + ");";
}
//delay fadeOut
setTimeout(delay, 3000);
function delay(){
fadeOut('message', 1)
clearTimeout(delay,1);
return false;
}
//Call functions
var fadeI = document.getElementById('fadeI');
var fadO = document.getElementById('fadeO');
fadeI.onclick = function() {
fadeIn('message', 1);
};
fadeO.onclick = function() {
fadeOut('message', 1);
};
};
</script>
最佳答案
<script>
window.onload = function() {
var outListener = 0, InListener = 0, opacity = 1;
function fadeOut(id, seconds) {
if(gid(id).style.display != 'none' || gid(id).style.display == ''){
outListener = setInterval(function() {
opacity -= 0.1;
setOpacity(id);
if(opacity < 0) {
clearInterval(outListener);
}
}, seconds);
}
}
function fadeIn(id, seconds) {
if(gid(id).style.display == 'none'){
InListener = setInterval(function() {
opacity += 0.1;
setOpacity(id);
if(opacity > 1) {
clearInterval(InListener);
}
}, seconds);
}
}
function setOpacity(id) {
document.getElementById(id).style.opacity = opacity;
document.getElementById(id).style.MozOpacity = opacity;
document.getElementById(id).style.KhtmlOpacity = opacity;
document.getElementById(id).style.filter = 'alpha(opacity="'+ (opacity * 100) + '");';
document.getElementById(id).style.display = (opacity<0) ? 'none' : 'block';
}
function gid(id){
return document.getElementById(id);
}
var fadeI = gid('fadeI');
var fadO = gid('fadeO');
fadeI.onclick = function() {
fadeIn('message', 1000);
};
fadeO.onclick = function() {
fadeOut('message', 1000);
};
};
</script>
关于Javascript fadeIn fadeOut 不断重新淡出(没有 JQuery!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22684984/