javascript中的淡入淡出
我将继续开展以下工作： 在设置新功能之前，检测淡入或淡出是否完成的最佳方法是什么。这是我的方式，但我想还有更好的方式吗 我添加了警报以便于您查看 我之所以要这样做是因为：如果在for循环结束之前按下按钮，动画看起来会很糟糕 我希望按钮只有在淡入淡出完成后才能工作javascript中的淡入淡出,javascript,function,settimeout,fadein,fadeout,Javascript,Function,Settimeout,Fadein,Fadeout,我将继续开展以下工作： 在设置新功能之前，检测淡入或淡出是否完成的最佳方法是什么。这是我的方式，但我想还有更好的方式吗 我添加了警报以便于您查看 我之所以要这样做是因为：如果在for循环结束之前按下按钮，动画看起来会很糟糕 我希望按钮只有在淡入淡出完成后才能工作 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head&g
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<span id="fade_in">Fade In</span> |
<span id="fade_out">Fade Out</span></div>
<div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
</div>
</div>
<script type="text/javascript">
var done_or_not = 'done';
// fade in function
function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
document.getElementById('fading_div').style.opacity = opacity_value / 100;
document.getElementById('fading_div').style.filter = 'alpha(opacity='+opacity_value+')';
if(fade_in_or_fade_out == 1 && opacity_value == 1)
{
document.getElementById('fading_div').style.display = 'none';
done_or_not = 'done';
alert(done_or_not);
}
if(fade_in_or_fade_out == 0 && opacity_value == 100)
{
done_or_not = 'done';
alert(done_or_not);
}
}
window.onload =function(){
// fade in click
document.getElementById('fade_in').onclick = function fadeIn() {
document.getElementById('fading_div').style.display='block';
var timer = 0;
if (done_or_not == 'done')
{
for (var i=1; i<=100; i++) {
set_timeout_in = setTimeout("function_opacity("+i+",0)", timer * 10);
timer++;
done_or_not = 'not_done'
}
}
};
// fade out click
document.getElementById('fade_out').onclick = function fadeOut() {
clearTimeout(set_timeout_in);
var timer = 0;
if (done_or_not == 'done')
{
for (var i=100; i>=1; i--) {
set_timeout_out = setTimeout("function_opacity("+i+",1)", timer * 10);
timer++;
done_or_not = 'not_done'
}
}
};
}// END window.onload
</script>
</body>
</html>
淡入
淡出
褪色盒
var done_或_not='done'；
//淡入功能
函数函数不透明度（不透明度值、淡入淡出）{//fade\u in\u或淡出淡入淡出-0=淡入淡出，1=淡出淡出
document.getElementById（'Facing_div'）。style.opacity=opacity_value/100；
document.getElementById（'Facing_div'）。style.filter='alpha（不透明度='+不透明度_值+'）；
if（淡入淡出==1&&opacity\u值==1）
{
document.getElementById（'facing_div'）。style.display='none'；
完成或未完成=‘完成’；
警报（完成或未完成）；
}
如果（淡入淡出==0&&opacity\u值==100）
{
完成或未完成=‘完成’；
警报（完成或未完成）；
}
}
window.onload=函数（）{
//淡入单击
document.getElementById（'fade_-in'）。onclick=函数fadeIn（）{
document.getElementById（'facing_div'）.style.display='block'；
var定时器=0；
如果（完成或未完成==‘完成’）
{
对于（变量i=1；i=1；i--）{
set_timeout_out=setTimeout（“函数_不透明度（“+i+”，1）”，计时器*10）；
定时器++；
完成或未完成='未完成'
}
}
};
}//结束窗口.onload
var alpha = 100
function fade() {
if (alpha > 0) {
alpha -= 1;
*your opacity changes*
(e.g.: .opacity = (alpha/100);
.style.filter = 'alpha(opacity='+alpha+')';)
}
else {
*complete - modify the click event*
}
}
ps：我尊重你自己编写的代码。javascript库被过度使用，而且常常是不必要的。可以用几种方法解决。请看一下我主页存根上的代码
http://marek.zielonkowski.com/thescript.jsclearInterval（isMoving）
或
或者，您可以编写自定义事件代码，并向侦听器发送类似“onFadeOutStop”的消息
请不要在setTimeout（'function_name（）'）中加引号，因为这是一个坏习惯（setTimeout的行为就像eval一样，应该是邪恶的：）我同意一些评论。有许多漂亮的JavaScript库，它们不仅使编写代码更容易，而且还解决了一些浏览器兼容性问题
话虽如此，您可以修改淡入淡出函数以接受回调：
function fadeIn(callback) {
return function() {
function step() {
// Perform one step of the animation
if (/* test whether animation is done*/) {
callback(); // <-- call the callback
} else {
setTimeout(step, 10);
}
}
setTimeout(step, 0); // <-- begin the animation
};
}
document.getElementById('fade_in').onclick = fadeIn(function() {
alert("Done.");
});
我只使用jQuery创建了一个简单的动画示例。您可以在此处查看：
var buttonFadeIn=$（“#淡入”）；
var buttonFadeOut=$（“#淡出”）；
var fadingDiv=$（“#fadingDiv”）；
var done=true；
buttonFadeIn.单击（函数（）{
如果（完成）{
//将“完成”设置为false：
完成=错误；
//启动动画：
fadingDiv.fadeIn(
1500，//您应该使用jquery。您可以在动画之后运行函数
$('#clickthis').click(function(){
//jquery has really easy way of animating css properties
//the 5000 is the duration in milliseconds
$('#animatethis').animate({opacity:0},5000,function(){
//this will only run once the animation is complete
alert('finished animating');
});
//or use the function..
$('#animatethis').fadeOut(5000,function(){
//this will only run once the animation is complete
alert('finished fading out');
});
});
应该可以了。我没有测试它，所以如果它有任何错误，请原谅我
-L你能使用jQuery吗？它使链接事件变得非常简单。当有很多成熟的javascript动画库存在时，你为什么要自己编写这些。例如，jQuery有一些内置的效果。script.aculo.us是另一个流行的JS动画库。jQuery还在旧版本的IE中实现fadein/out。你的不透明度操作on将不会播放。或者，如果您想学习，最好的方法可能是您可以研究这些库的源代码。大多数库都是开源的。对此“为什么”感到抱歉注释，但我怀疑您是否真的想让访问者等待动画完成，这可能需要几秒钟。当我按下按钮时，我总是希望立即执行操作。如果您的代码需要在此时全部完成淡入淡出，则您可以强制它完成。如果您已经考虑并放弃了此操作想法，我为绕道而道歉。谢谢stackuser10210。我同意out关于库的观点。我想在使用它们之前先学习javascript。我想，确切地知道你的代码在做什么并尽可能地保持轻量级是很好的。我想，“我们知道你喜欢编程，所以我们在你的语言中加入了一种语言，这样你可以在编码的同时编码。”-虚构的jLib:）谢谢，我会看看：）在这种情况下，没有引号我怎么做？就像这里isfacing=setInterval（function（）{changeFacing（1）；}，timer）
谢谢PPcG，坦斯克的回答。我希望函数能像今天一样工作。如果函数繁忙，什么都不会发生，没有函数我可以继续。也许我的“设置”和“检查”变量的方法没那么糟糕？或者你会说它不会降低性能？谢谢PPcG，我继续
// Before anything else:
var done = false;
// Define a callback:
function myCallback() {
done = true;
// Do something else
}
// Perform the asynchronous action (e.g. animations):
done = false;
doSomething(myCallback);
var buttonFadeIn = $('#fade_in');
var buttonFadeOut = $('#fade_out');
var fadingDiv = $('#fading_div');
var done = true;
buttonFadeIn.click(function() {
if (done) {
// Set done to false:
done = false;
// Start the animation:
fadingDiv.fadeIn(
1500, // <- 1500 ms = 1.5 second
function() {
// When the animation is finished, set done to true again:
done = true;
}
);
}
});
buttonFadeOut.click(function() {
// Same as above, but using 'fadeOut'.
});
$('#clickthis').click(function(){
//jquery has really easy way of animating css properties
//the 5000 is the duration in milliseconds
$('#animatethis').animate({opacity:0},5000,function(){
//this will only run once the animation is complete
alert('finished animating');
});
//or use the function..
$('#animatethis').fadeOut(5000,function(){
//this will only run once the animation is complete
alert('finished fading out');
});
});