Website animation with jQuery

jQuery is a library that makes common tasks for web developers a lot easier.

  • Manipulating the webpage
  • Responding to user events
  • Getting data from their servers
  • Building effects and animations

jQuery builds on top of the functionality that browser give us via the Javascript DOM API

Add jquery library to you html page

<script src=””></script>

If you are writing your jQuery on another page, make sure you add the jQuery source above your javascript file source

<script src=””></script>
<script type=”text/javascript” src=”app.js”></script>

It’s all about the $

The $ keyword replaces document.querySelector()




The only difference is that $ will select ALL of the H1. And not just the first one.



This will change the text in ALL the h1 on the page


Is the same as in DOM API:


You can add an id to target just one element

Use jQuery to modify existing text

var headingText = $(“#main-heading”).text();

This will return the text of element #main-heading in one long string and you can console.log(headingText)

$(“#main-heading”).text(“!!” + headingText + “!!”);

This will modify the existing headingText by adding !! before and after

To return the text &gt; text() ie zero arguments

How many h1(s) in the page ?

$(‘#heading’).html(‘hello <strong>john</strong’);
Use .html to modify the element with html</strong>

$(‘p’).css(‘color’, ‘red’)
Change the css of the element

Add a class

$(‘a’).attr(‘href’, ‘’)
Modify all urls

$(‘img’).attr(‘src’, ‘’)
Modify the picture with a new source

Creating elements with jQuery

Var newP = $(‘
newP.text(‘hello paragraph’)

Create an element that is a

(no need to close), add the text ‘hello paragraph’ and the class ‘className’

//append prepend after


Add the new element at the end (append) of body

jQuery Collections vs. DOM Nodes

DOM functions return DOM Nodes
var headingFromD = document.getElementById(“myId”);
headingFromD.innerHTML = “Setting .innerHTML”;

Jquery returns jQuery collections
var headingFromJ = $(“#myId”); // jQuery collection
headingFromJ.html(“Using .html()”);

This just means that you can only apply respective methods to each. You canNOT for example use .html on DOM Nodes.

To keep things clear there is a naming convention.

var $headingFromJ > add a $ before.

Convert a jQuery collection into a DOM node

You have to treat the variable as an array with 1 element. And use index 0 to pull it out.

var $heading = $(“#cuteness”);
$heading.html(“Using jQuery again!”);
var headingD = $heading[0];

Convert a DOM node into a jQuery collection
var $headingJ = $(headingD);

Looping through jQuery collections

3 ways to do this:

//with for loop

var $paragraphs = $(‘p’);
for (var i = 0; i &lt; $paragraphs.length; i++) {
var element = $paragraphs[i]; // DOM node
var $paragraph = $(element);
$paragraph.html( $paragraph.html() + “..huzzah!”);

// each()

$paragraphs.each(function(index, element) {
var $paragraph = $(element);
$paragraph.html( $paragraph.html() + “..wowee!”);

// each with this

$paragraphs.each(function(index, element) {
var $paragraph = $(this);
$paragraph.html( $paragraph.html() + “..wowee!”);

Chaining jQuery methods

.text(“new text”)

Basically you can just add everything together with . Each part returns a collection. So you are just adding a method on the new returned collection.

Only difference with .appendTo(‘body’)

Instead of $(“body”).append(newP);

Adding event listeners with jQuery

<button id=”button-id”>Click Here</button>

$(“#button-id”).on(“click”, () =&gt; {
console.log(“I got clicked!!”);

Using event properties in jQuery

When user clicks anywhere on the page, show and image:

$(“body”).on(“click”, function(event) {
var $img = $(“<img />”)
.attr(“src”, “”)
.css(“position”, “absolute”)
.css(“top”, event.pageY + “px”)
.css(“left”, event.pageX + “px”)

$(“#dog-pic”).on(“click”, function(event) {
var $dot = $(”
$dot.css(“top”, event.pageY + “px”)
$dot.css(“left”, event.pageX + “px”)


DOM events and properties examples

Full list here

Mouse events

  • Mousedown
  • Mouseup

Keyboard events

  • Keydown,
  • Keypress
  • Keyup

Touch events (Mobile)

Drag Events
There is a draggable UI library:

Form Events


Checking DOM readiness with jQuery

The DOM needs to be ready for jQuery or JS to work.

If jQuery is in a function jQueryCode(), by adding the following code, the page will only load jQuery when the DOM is ready. You can add this anywhere.

$(document).ready(function() {

Triggering events

Make the event launch even if the click hasn’t happened (good for testing):


DOM Animation and Effects with jQuery

Animation visibility with jQuery

Show / Hide




Toggle will choose to show or hide the element depending on previous position.

Add speed/slowness to showing and hiding




Add delay

$(“#pic”).slideDown(2000, function() {

Only do the text fade in when the slideDown is finished.

Turn off ALL animations

Animating numeric properties with jQuery

Animate object can animate any element that is numeric like width, opacity etc.

width: “400px”
marginLeft: “30px”
}, 1500);

fontSize: 40px

Using a descendant selector to select an element

<div class=”cat”><img src=”” width=”150″ />$(‘.cat img’).animate({

This will select the image in the class cat and animate the width.

What do you think?

Written by John

Leave a Reply

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

Use Regular Expressions with Javascript

Manipulating the DOM with Javascript