Question

我编写了一个代码，显示点击问题，并在一段时间内显示答案。当代码中没有fadeOut函数时，代码工作正常。一旦我放了fadeOut函数，问题和答案只显示一次。之后只显示问题。为什么会这样？

以下是我的代码链接：http://jsfiddle.net/sagesony/6qDap/1058/

和代码

<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>

Answer 1

因为fadeOut将你的元素设置为display：none;褪色后。所以，你必须再次将此元素设置为fadeOut。

只需使用：

.show()

这样做。

http://jsfiddle.net/Valtos/6qDap/1060/

Answer 2

你需要使用像

这样的延迟

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();
    })
})

Answer 3

您应该再次展示：http://jsfiddle.net/6qDap/1063/

 $("#answer").fadeOut(1000, function(){
        $(this).show().text('');
    });

Answer 4

这是因为在调用fadeOut()方法后，answer范围将永远隐藏。您将不得不做一些事情再次显示它，如下所示：

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);
});

FIDDLE DEMO

fadeOut里面的onclick函数

4 个答案: