jQuery - basic effects

by Jennifer Piccione

HTML

<h2 id="notes">Notes...</h2>
<ul>
    
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li id="four">Fourth</li>
</ul>

JavaScript

$(function() {
   
    $('h2').hide().slideDown();
    
    var $li = $('li');
    
    $li.hide().each(function(i) {
       $(this).delay(700 * (i+1)).fadeIn(700); 
    });
    
    /*
    $li.on('click', function() {
        $(this).fadeOut(700); 
    });
    */
    
    // animation
    $li.on('click', function() {
        $(this).animate({
            opacity: 0.0,
            paddingLeft: "+=80"
        }, 500, function() {
           $(this).remove(); 
        });
    });
    
});