javascript - onclick 函数内的 fadeOut

标签 javascript jquery

我编写了一段代码,可以在点击时显示问题,并在特定时间段内显示答案。当代码中没有 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>

最佳答案

因为 fadeOut 正在将您的元素设置为 display:none;褪色后。 因此,您必须再次将此元素设置为可见以再次淡出。

只需使用:

.show()

执行此操作。

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

关于javascript - onclick 函数内的 fadeOut,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21602330/

相关文章:

jquery - 使用 jquery mobile 进行 iscroll 页面转换

javascript - 将表中选定的行保存到本地存储中

javascript - 为什么数组未定义?

javascript - 如何删除退格键上插入的<span>?

javascript - 将复选框放在单元格中 jqgrid 插件

javascript - 无法在ajax返回的代码中调用jquery函数

javascript - 从javascript中的构造函数显式返回值

javascript - Google+ 登录按钮 [类 ='g-signin']

Javascript div 淡入淡出不使用 setInterval

javascript - 如何在javascript中动态转换诸如 "select::-ms-expand"之类的css?