Animate your pages with basic jQuery effects | Beginners Guide

jQuery Core Funda: You should animate your web page with some basic jQuery effects.

JQuery is the best thing ever for animate your web pages with just some little programming. Jquery is a responsive multi-browser JavaScript library to designed for making classic effects to the client side web scripting of HTML.

JQuery has two types a quite bit of functionalities of effect scripting, one is ‘Built-in Effects’ and second is ‘Custom Animation Effects’ which you can use to modify and turn your web pages to effective animations. You can use Build-in effects setting in to the Pre-built jQuery objects(As methods) or also create a custom effect setting with .animate( ) with arbitrary of CSS properties.

So, here I have complete basic jQuery guidelines for you to animate your web pages with all types of animation effects. It adds supports to animate colors or classes transitions with various additional functions. Use it for your website’s jQuery sliders at the home page.

Look out more about: Tops 10 Free jQuery Sliders

Built-in jQuery Effects:

These are the list of built-in effects (With an Example) which you can frequently use to modify or animate your web page with into the jQuery methods and you can call it in any jQuery objects. To learn about Built-in jQuery Effects:

  • .addClass(): Use to add any specific class(or classes) into sets of similar elements while changing of animating various styles.
  • .effect(): Use to apply one animation to one effect (One method for each effect).
  • .hide(): Use to hide selected any similar element of the object using custom effect.
  • .removeClass(): Use to remove any specific selected class(or classes) from the sets of similar elements of the styling.
  • .show(): Use to show/display selected each similar elements of the styling.
  • .switchClass(): Use to Add or Remove any selected class(or classes) of the similar elements of the styling.
  • .toggle(): Use to toggle (Hide or Display) selected matched elements using custom effect.
  • .toggle(): Add or Remove class (or Classes) from the sets of each similar element if class’s presence or values of the switch arguments.
  • .fadeIn(): Use for the adjust(Increase) opacity of the selected elements to animate to 100% transparency.
  • .fadeOut(): Use for the adjust(Decrease) opacity of the selected elements to animate to 0% transparency.
  • .slideDown(): Use to Display selected styling elements in vertical sliding motion effect.
  • .slideUp(): Use for the hide any selected styling elements in vertical sliding motion effect.
  • .slideToggle(): Hide or Show(display) any elements of sliding motion of styling.
  • click(): Use to click on any object or event.
  • dblclick(): Double click event to any elements of the styling.
  • mouseenter(): Use for the mouse enter event facility to the jQuery styling elements.
  • mouseleave(): Use to mouse leave event from the jQuery styling elements.
  • mousedown(): Use to mouse down event from the selected elements of the styling effect.
  • mouseup(): For mouse Up event handling styling.
  • hover(): Use to mouse hover event to the any element of the styling.
  • focus(): Handle to focus on each element of the jquery.
  • blur(): Use to blur event for the styling objects.

Example to Learn jQuery Effects in details

This is the simple example of jQuery effects and I have used .show() and .hide() methods  to display and hide paragraph by clicking to buttons. Copy this code, paste it in new notepad/word-pad and save it as example.html (Extension must be .html) then open that file in your browser, you can see the actual effect of the example.

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>
<p>This is the simple example of Hide & Show methods of jQuery built-in effect from : <a href=”http://www.amaezing.com/” target=”_blank”>Amaezing.com</a></p><p>If you click on the “Hide” button, This paragraph will disappear/hide and when you click on the show, it shows again.</p>
<button id=”hide”>Hide</button>
<button id=”show”>Show</button>
</body>
</html>

Custom jQuery Effects to using .animate() method:

So, If you don’t happy with the built-in jQuery effects and want to create some new, classic and amazing effects in your web pages then use .animate() method to create unique custom effects with so many CSS properties.

While you are using custom jQuery effect for you jQuery slider or any other JS scripting, you need to use CSS property with them to perform each element of styling. Look out below basic example of Custom jQuery Effect which help you to perform styling with CSS property.

Example of Custom jQuery Effect

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({right:’250px’});
});
});
</script>
</head><body>
<button>Start Animation</button>
<p>This is the simple example of .animate() methods of Custom jQuery effect from : <a href=”http://www.amaezing.com/” target=”_blank”>Amaezing.com</a></p><p>Each element of HTML is static. If you click on to “Start Animation” button, This black rectangle will move left to right.</p>
<div style=”background:#000;height:100px;width:200px;position:absolute;”>
</div></body>
</html>

As you have done with the previous example (By saving code in .html file), you can see the actual effect of this second example. You can use as many as you want in .animate() with CSS property to animate any types of functionalities on your web pages.

Check out JQuery Learning Guide for Designer: Basic to Master programming

Manage your Animations:

You can manage your jquery styling animations by using jQuery managing methods. Jquery provides two types of manage animate methods: .stop() and .delay().

  • .stop(): For stop currently running any animation or any styling of web page.
  • .delay(): For delay/pause any animation before execute to the next styling method.

Look out the example of .stop() animation method to see how actual work this methods to manage jQuery styling.

Example

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#flip”).click(function(){
$(“#panel”).slideDown(3000);
});
$(“#stop”).click(function(){
$(“#panel”).stop();
});
});
</script><style type=”text/css”>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#0174DF;
border:solid 2px #000000;
}
#panel
{
padding:150px;
display:none;
}
</style>
</head>
<body><button id=”stop”>Stop Animate</button>
<div id=”flip”>CLICK HERE to Slide down</div>
<div id=”panel”>This is the slider. If you want to stop it, click on to ‘Stop Animate’ button</div></body>
</html>

So, these are the basic learning methods of jQuery styling effects for beginners programmer. If you really like it, then don’t forget to share with your friends by just click on to below share buttons. Learn more about JQuery Plugin Development. Cheers !!

1 Comment

Add a Comment
  1. wonderful brother 🙂 thanks !!!

Leave a Reply

Techdevotee © 2015