Hit enter after type your search item

jQuery animate on click: button link and other elements

The animateClick plug-in

In this tutorial, I am going to show you how you may create animations as specified element like a button is clicked. For example, as you click create account button, you can show an animation of “Tick” to confirm users that account is created.

Similarly, for a failed operation upon clicking a button or link, the cross animation can be displayed for symbolically presenting failed status.

For that, I am going to use a nice jQuery plug-in, animateClick, which is developed by Arun Thomas and is available for downloading here.

An example of showing Ticked animation in a button link

In this example, as you click the “button” which is basically a link tag, the tick animation with  green color will display. See the demo online by clicking the link below:

jQuery animation button

See online demo and code

Follow these steps for creating the animation as a “button” is clicked:

First of all, include the jQuery library in the <head> section:

<script type=”text/javascript” src=”js/jquery-1.12.0.min.js”></script>

After that, include the animateClick.js file, that you may get from the downloaded package from GitHub website or by right clicking the demo page, view source, and save the animateClick.js file in your system.

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

You also need to include the CSS file that comes with the package:

<link rel=”stylesheet” href=”css/main.css” />

Inside the script section, write the code of animation:


 

The markup section is just a link with specific classes:

<a id=”tickanimation” class=”button” href=”#”>Tick Animation</a>

That’s it.

Creating a cross animation

In this example, a cross animation is displayed as you click the link with button style. See the demo online:

jQuery animation cross

See online demo and code

For creating cross animation, you simply need to change the values in the script section. For cross animation, I just changed this:


 

In the animation parameter, you may specify different available animations like in above example I used “tick”. In this example, I used “cross”. Similarly, you may use the default, signal and shoot as well.

See example below with other animations and different colors.

Using signal, shoot and default animations

See the example online where I used the default, signal and shoot values for animation parameter.

jQuery animation

See online demo and code

See the complete code in the demo page code panel.

An example of animation with span tag

As mentioned earlier, not only you can create animation with links or buttons but other HTMl elements as well. In this example, I am using a <span> tag for the tick animation.

As you click the span tag’s text, the tick mark will display with animation.

jQuery animation span

See online demo and code

The CSS class of span tag is created in the style section. Similarly, you may create animations for paragraph or div tag as well.

This div height required for enabling the sticky sidebar