Thank You Animated Message With jQuery

June 5, 2017 Maria C. Lima

Below is the code to create an animated Thank You message using HTML, CSS, and jQuery. Please contact me at [email protected] if you have any questions or would like me to customize an animated message for you.

Demo

  • Hello, 
  • Thank 
  • You 
  • for 
  • all 
  • the 
  • special 
  • things 
  • you 
  • do!!

Replay animation

Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Description

We used a list of words to display the animated message. The styles are provided below. We selected the words with jQuery and set the opacity to zero. Then, we displayed one word at a time with a delay of 500 milliseconds.

jQuery

Place the JavaScript below under the JQuery library.

<script>
jQuery(function(){
    var animateThankYou = function() {
        $('ul.animated-thank-you').find('li').css({'display':'none'});
        var obj = $('ul.animated-thank-you'), 
        lists = obj.children();
        $(lists).css({ 
            'opacity': 0,
            'display':'inline-block',
        });
        $( lists ).each(function( i ) {
            $(this).delay( i * 500 ).animate({ 
                'opacity': 1
            });
        });
    };

    animateThankYou();
});
</script>

HTML

Place the HTML somewhere in your page between the <body> and <\body>.

<ul class="animated-thank-you">
  <li>Hello,</li>
  <li>Thank</li>
  <li>You</li>
  <li>for</li>
  <li>all</li>
  <li>the</li>
  <li>special</li>
  <li>things</li>
  <li>you</li>
  <li>do!!</li>
</ul>

CSS

Place the CSS somewhere between the <head> and <\head>.

<style>
@import url('https://fonts.googleapis.com/css?family=Satisfy'); 
ul.animated-thank-you { 
     width:100%;
     max-width:320px;
     margin:0 auto;
     font-weight:500;
     list-style-type: none;
}
ul.animated-thank-you li { 
     float:left;
     display:none;
     height:20px;
     font-family: 'Satisfy', cursive;
     color:#0ca4dc;
     font-size:72px;
}                    

</style>

, , , ,
Maria C. Lima

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work show tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.