jQuery effect example

jQuery effect example for COMP1021

by scsswil

HTML

<p id="p1" style="display:none;">Hello world</p>
<p id="p2" style="display:none;">Hello world</p>
<p id="p3" style="display:none;">Hello world</p>
<p id="p4" style="display:none;">Hello world</p>
<p id="p5" style="display:none;">Hello world</p>
<button>Click to fade in boxes with a delay</button>

JavaScript

$(document).ready(function() {
  $("button").click(function() {
    $("#p1").delay(1000).fadeIn();
    $("#p2").delay(2000).fadeIn();
    $("#p3").delay(3000).fadeIn();
    $("#p4").delay(4000).fadeIn();
    $("#p5").delay(5000).fadeIn();
  });
});