fadeOut里面的onclick函数
[英]fadeOut inside the onclick function
问题描述
I have written a code which shows question on click and also shows answer for certain period of time. 
我写了一个代码，显示点击问题，并在一段时间内显示答案。 The code works fine when there is no fadeOut function inside the code. 当代码中没有fadeOut函数时，代码工作正常。 As soon as I put the fadeOut function, the question and answer is shown only once. 一旦我放了fadeOut函数，问题和答案只显示一次。 After that only question is shown . 之后只显示问题。 Why is this happening ? 为什么会这样？
Here is my code link : http://jsfiddle.net/sagesony/6qDap/1058/ 这是我的代码链接： http ： //jsfiddle.net/sagesony/6qDap/1058/
and the code 和代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<body>
<p>Question: <span id="question"></span></p>
<p>Answer: <span id="answer"></span></p>
<input id="start" type="button" value="start"/>
<input id="show" type="button" value="show answer"/>
<script>
document.getElementById("start").onclick=function(){
var i=Math.round(Math.random()*3);
var verbs=["play","run","go","kill"];
document.getElementById("question").innerHTML=verbs[i];
document.getElementById("show").onclick=function(){
var answers=["golf","dog","school","none"];
document.getElementById("answer").innerHTML=answers[i];
$("#answer").fadeOut(1000);
};
};
</script>
4 个解决方案
解决方案1
2 2014-02-06 12:03:07
because fadeOut is setting your element to display:none; 因为fadeOut将你的元素设置为display：none; after fading. 褪色后。 so, you have to set this element visible again to fadeOut again. 所以，你必须再次将此元素设置为fadeOut。
just use: 只需使用：
.show()
to do this. 去做这个。
http://jsfiddle.net/Valtos/6qDap/1060/ http://jsfiddle.net/Valtos/6qDap/1060/
解决方案2
0 2014-02-06 12:02:58
You need to use a delay like 你需要使用延迟
var verbs = ["play", "run", "go", "kill"];
var answers = ["golf", "dog", "school", "none"];
//register click handler
$('#start').click(function () {
var i = Math.round(Math.random() * 3);
$("#question").html(verbs[i]);
$('#show').click(function () {
$("#answer").html(answers[i]).delay(1000).fadeOut();
})
})
解决方案3
0 2014-02-06 12:03:54
You should show it again: http://jsfiddle.net/6qDap/1063/ 你应该再次展示它： http ： //jsfiddle.net/6qDap/1063/
$("#answer").fadeOut(1000, function(){
$(this).show().text('');
});
解决方案4
0 2014-02-06 12:04:06
This happens since after calling the fadeOut() method the answer span is hidden forever. 这是因为在调用fadeOut()方法之后， answer范围将永远隐藏。 You will have to do something to show it again like below: 您将需要做一些事情再次显示它，如下所示：
var i = 0;
var verbs = ["play", "run", "go", "kill"];
var answers = ["golf", "dog", "school", "none"];
$('#start').click(function () {
i = Math.round(Math.random() * 3);
$('#question').html(verbs[i]);
});
$('#show').click(function () {
$("#answer").html(answers[i]).show().fadeOut(1000);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.