NqQKMY

index.html

<button>Click Here</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

NqQKMY.markdown

NqQKMY

Forked from Captain Anonymous's Pen MwNgrz.

Forked from Captain Anonymous's Pen MwNgrz.

Forked from Captain Anonymous's Pen MwNgrz.

A Pen by anna on CodePen.

License.

script.js

$(document).ready(function() {
  $("button").on("click", function() {
    
    
    $("ul").toggle(500, function() {
      
      $("li:nth-child(1)").delay(1000).fadeIn(1000, function() {
        $(this).css("color", "green");
      });
      
      $("li:nth-child(2)").delay(2000).fadeIn(1000, function() {
        $(this).css("color", "blue");
      });
    
      $("li:nth-child(3)").delay(3000).fadeIn(1000, function() {
        $(this).css("color", "purple");
      });
    });
    
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

button {
  background-color:red;
  color:white;
  padding: 20px;
}

ul {
  display: none;
}