Emmanuel Ndubuisi

Emmanuel Ndubuisi

trying my best

Web Animations with jQuery (Part 1)


Required: Basic understanding of HTML and CSS

Introduction
If you are reading this tutorial, congratulations you have read a few books on HTML and CSS, and you probably know how to create a basic website (or not.)

HTML and CSS is a great place to start when learning how to code. But what’s next? I get asked this question from beginners all the time, and it’s totally understandable for anyone to get stuck at this point.

I mean there are so many options to choose from anyway! Javascript, Python, PHP, Bootstrap?

I say jQuery!

Vision dominates all other senses; the human brain pays a lot of attention to color, orientation, size and of course, motion. By including animations on your web page, your users are more likely to stay glued to it.

What is jQuery?
So what is jQuery? The purpose of jQuery is to make it much easier to use JavaScript on your website. It takes common tasks that require a lot of complex JavaScript code to accomplish and wraps them in a method that you can call with a single line of code. According to the official jQuery website, “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”

In simple terms, jQuery is a library for doing fancy things on your web page.

Most people will suggest learning JavaScript before jQuery, but I don’t think a knowledge of JavaScript is so important before learning jQuery, at least for the basics. In fact, knowing jQuery can make learning and using JavaScript on your website a little easier.

The jQuery Syntax
Using jQuery is very similar to using CSS. Like in CSS, the jQuery syntax is built for selecting HTML elements and performing some actions on these elements.

Here is an example of what a simple jQuery function looks like:

What jQuery looks like (Simple jQuery function)

What jQuery looks like

If the code snippet above didn’t scare you off then damn, you brave! Because if I was only a beginner, I would have been scared off right away. Okay… honestly, there is no reason to be scared; it is not as hard as it looks.

Here is what all that fancy code means from top to bottom.

$(function() {
...
});

It is good practice to wrap all your jQuery methods in this function. What this does is to ensure that your function is called only when all the DOM elements of the page have been loaded.

In less fancy terms, it is too make sure that the browser runs your jQuery code only after your web page has been loaded.

It is important to know that the basic syntax for jQuery is

$(selector).action()

Which is very similar to the CSS syntax

selector {
property: value;
}

Okay, maybe it isn’t so similar but the main idea behind how they both work is definitely similar! In CSS, you select an HTML element and give it a property. But in jQuery, you select an HTML element to give it an action.

Hmm, so what’s an action?

A jQuery action is what is performed on an HTML element when an event occurs on your web page. jQuery actions include effects such as:

• hide
• fade
• slide
• animate

Um okay… so what’s an event?

Users perform a countless number of things on a web page such as hovering their mouse over an element, clicking a button, scrolling up and down, maximizing and minimizing— all of these are examples of events. With jQuery, you can specify what action should happen when any of these events occur on your web page.

So let’s take another look at our “complex” piece of code. I am sure as hell it’s going to make more sense now.

In the code snippet, the jQuery methods are wrapped between line 1 and 5.

In Line 2, we have an event listener. What this does is, well… it listens to events! It selects button element(s) on your web page and whenever a click event happens on the button, it performs the method/action wrapped in it.

In Line 3, we have a method and this method is wrapped inside the event listener. The method selects all paragraph elements on your web page and adds the hide() action to it.

So what the code does as a whole is to listen to whenever a button element is clicked on a web page and then hides all the paragraph elements on that web page right after.

What the jQuery code snippet does in a web page

What the jQuery code snippet does in a web page

That wasn’t so hard now, was it?

Now you know the basics of jQuery, let’s get down to business!

via GIPHY

How to Make Your Web Page Dance with jQuery — Part Two

View story at Medium.com