• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Examples of Text Animations Using jQuery

Examples of Text Animations Using jQuery

May 1, 2022 Leave a Comment

In this post, we will go over some text animations we can do using jQuery. We already know we can animate text size using jQuery, so this post will focus more on moving text into the view of the user. This will be done mainly with the help of the jQuery animate() method.

This has become a popular animation on many websites, as it is a way to help catch the user’s attention.

In this example, we will go over how to move text in from the left, right, top, and bottom.

Animating text into view using jQuery

In this example, we will have a simple empty div with a paragraph. We will provide the user with 4 button options, to move text in either from the left, from above, from the right, or from the bottom.

We will need to add some CSS to the div and to the paragraph to start. The rest of the animation will be done using jQuery.

Here is our HTML and CSS setup:


<style>#div1 { position: relative; width: 500px; height: 200px; overflow: hidden; border: 1px solid #444; } #p1 { width: 350px; position: absolute; left: -370px; top: 20px; }
<div id="div1">
  <p id="p1">This is some text we will animate using jQuery.</p>
</div>
<div id="click-me1" class="click-me">Move text in from the left</div>
<div id="click-me2" class="click-me">Move text in from the top</div>
<div id="click-me3" class="click-me">Move text in from the right</div>
<div id="click-me4" class="click-me">Move text in from the bottom</div>

In the jQuery and JavaScript part of this example, we will need to make use of the jQuery animate() method. When the user clicks a button we will run a different function for each.

To animate the position of our paragraph, we will need to target the left property of our paragraph. The first parameter of the jQuery animate method takes the CSS properties we want to animate. The second parameter takes the speed at which we want to animate at in milliseconds.

These are the two parameters we will use of the jQuery animate method and will be all we need to accomplish what we want. We will also animate each way at a different speed.

Here is our JavaScript and jQuery code:

//Move text in from the left
$("#click-me1").click(function(){
  //Since the user can run this example many times, 
  //we must reset the the position of the paragraph 
  //before doing the animation each time
  $("#p1").css("left", "-370px");
  $("#p1").animate({left: "10px"}, 1000);
});

//Move text in from the top
$("#click-me2").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "-70px");
  $("#p1").animate({top: "20px"}, 500);
});

//Move text in from the right
$("#click-me3").click(function(){
  $("#p1").css("left", "520px");
  $("#p1").animate({left: "10px"}, 100);
});

//Move text in from the bottom
$("#click-me4").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "220px");
  $("#p1").animate({top: "20px"}, 1500);
});

The final code and output for this example is below:

Code Output:

This is some text we will animate using jQuery.

Move text in from the left

Move text in from the top

Move text in from the right

Move text in from the bottom

Full Code:


<style>#div1 { position: relative; width: 500px; height: 200px; overflow: hidden; border: 1px solid #444; } #p1 { width: 350px; position: absolute; left: -370px; top: 20px; }
<div id="div1">
  <p id="p1">This is some text we will animate using jQuery.</p>
</div>
<div id="click-me1" class="click-me">Move text in from the left</div>
<div id="click-me2" class="click-me">Move text in from the top</div>
<div id="click-me3" class="click-me">Move text in from the right</div>
<div id="click-me4" class="click-me">Move text in from the bottom</div>

<script>

$("#click-me1").click(function(){
  $("#p1").css("left", "-370px");
  $("#p1").animate({left: "10px"}, 1000);
});

$("#click-me2").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "-70px");
  $("#p1").animate({top: "20px"}, 500);
});

$("#click-me3").click(function(){
  $("#p1").css("left", "520px");
  $("#p1").animate({left: "10px"}, 100);
});

$("#click-me4").click(function(){
  $("#p1").css("left", "10px");
  $("#p1").css("top", "220px");
  $("#p1").animate({top: "20px"}, 1500);
});
</script>

Hopefully this article has been useful for you to see some examples of text animations using jQuery.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Get Element by ID
  • 2.  How to Use jQuery to Remove Element
  • 3.  Using jQuery to Change Background Color
  • 4.  Using jQuery to Replace HTML Inside Div
  • 5.  Using jQuery to Remove the Id of a Div
  • 6.  jQuery after – Insert HTML After Another Element
  • 7.  jQuery hasClass – How to Check if an Element Has a Certain Class
  • 8.  jQuery clone – Making a Copy of an Element
  • 9.  jQuery mouseout – An Interactive Example of the mouseout Method
  • 10.  jQuery keydown Method

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy