Question

我为教学，问答风格的课程创建了一些互动实验室。学生看到一个＆＃34;问题＆＃34;喜欢＆＃34;使用cp命令将file1复制到file2。＆＃34;当他们点击它时，答案显示在下面：cp file1 file2

但学生们很懒，他们只是通过点击答案，逐字输入命令，而不是学习任何东西。我更改了代码，以便每次单击隐藏所有其他答案，并在显示之前添加10秒延迟。但现在的问题是对点击的反馈非常少。我想显示下一个元素，但没有它的内容，或者也许是加载gif？

这是我当前（相关）的代码：

.answer {
  display: inline-block;
  background: #333;
  color: #999;
  font-family: monospace; 
}

$(document).ready(function(){
  $(".step").next().hide();
  $("li").click(function(){
      $(".answer").hide();
      $(this).next().delay(10000).show(0);
      $("li").show();
    });
});

<li class="step">Use the <code>cp</code> command to copy file1 to file2.</li>
   <div class="answer">
   $ <span class="cmd">cp file1 file2</span>
   </div>

什么是让div块显示的最佳方式，但是对内容加了延迟（或加载gif）？

（另外，我是一个完整的jQuery noob，所以如果我做了一些荒谬的事情，请指出。）

谢谢！

Answer 1

请尝试以下代码，您的HTML也不在专业

中

$("li").click(function(){
    $(this).next().hide().delay(10000).show(0);
});

Answer 2

也许您可以设置答案容器的visibility css属性的动画。

请参阅jQuery .animate() documentation。它让您不仅可以播放动画的持续时间，还可以使用缓动功能。

即，定义动画在其持续时间内的速度变化的函数。

jQuery默认只提供两个缓动函数，但jQuery-UI上还有更多函数，如果我没错，你可以实现自己的函数（我从来没有这样做过）。

通过这种方式，您可以在一段时间内以一点可见性和低增量或无增量开始，并且仅在整个延迟的最后几秒内完成它的可视化。

Answer 3

我通过插入添加了一个加载gif： $(this).after('<img src="/ajax-loader.gif" />'); $(this).next().delay(1000).hide(0); 在最初的延迟之后。对于搞砸的注释格式很抱歉，缩进代码由于某种原因无效。：/

jQuery - 延迟显示答案

3 个答案: