Clever Geek Handbook

JQuery - display delayed responses

I have set up some interactive labs for the course I am teaching, such as questions / answers. The student sees a "question" such as "Use cp command to copy file1 to file2". When they click on it, the answer is displayed below:cp file1 file2

But the students are lazy, they just go through and click on the answers, type commands verbatim and don't learn. I changed the code so that every click hides all other responses and adds a delay of 10 seconds before displaying. But the problem is that there are very few reviews per click. I would like to maybe display the next element, but without its content, or maybe loading a gif?

Here is my actual code:

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

What's the best way to get the div to display, but put a delay (or gif loading) on ​​the content?

(Also, I am a complete jQuery noob, so if I did anything ridiculous please point it out.)

Thank!

+3


source to share


3 answers


I added gif loading by inserting:      $(this).after('<img src="/ajax-loader.gif" />');

   $(this).next().delay(1000).hide(0);

after an initial delay. Sorry for the broken comment formatting, the indented code doesn't work for some reason.: /



0


source


Please try the following code and your HTML is also not in pro



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


source


Perhaps you can animate the visibility css property of the response container.

See jQuery.animate () documentation . This allows you to play not only with the duration of the animation, but also with the easing function to be used.

That is, a function that determines the change in the speed of an animation over its duration.

jQuery only does two relaxation functions by default, but there is more on jQuery-UI , and if I'm not mistaken, you can implement your own (I never did).

Thus, you can start with little visibility and low or no increments over the time, and end rendering only in the last seconds of the entire delay.

0


source






More articles:


All Articles