5 most popular animations by JQuery

Sourav.Kayal
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 4572 red flag

This article will show 5 most popular animation creation in JQuery

5 most popular animations by JQuery

Here is am going to show 5 very popular JQuery effect which we can implement to develop animated web user interface. The example which I have shown here are very basic example but in real situation we can create nice looking one with the help of basic concept.  

Hide and show animation

Hide and show animation is very popular animation in web application. According to user’s need we can show or hide any HTML element.Don’t forget to add JQuery CDN link or local JQuery file link before test example.

<head runat="server">
  <style>
 
 </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
</head>
<body>
<form id="form1"runat="server">
<p>Hello</p>
<a href="#">Click me to hide</a>
<p>Here is another paragraph</p>
 <script>
       $("p").hide('slow');
       $("a").click(function (event) {
           event.preventDefault();
           $(this).hide();
       });
</script>
</form>
</body>
</html> 

When user will click on link it will disappear.

 

 Toggle effect

Toggle effect is one of popular effects of JQuery library. By using toggle effect we can hide and show any HTML element. In below the sample example is.

<head runat="server">
 <style>
  </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
</head>
<body>
 <form id="form1" runat="server">
 <div id="clickme">
      Click here
 </div>
   <div id= "MyDiv">This will toggle</div>
    <script>
        $('#clickme').click(function () {
            $('#MyDiv').toggle('slow', function () {
                //Animation complete.
            });
        });
    </script>
</form>
</body>
</html>
 

Fade in effect

When we want to make appear any HTML element slowly, we can use fade in effect. Here when user will click on text three color box will appear in user interface very slowly.

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
  height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
</head>
<body>
   <form id="form1" runat="server">
   <span>Click here...</span>
 
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
<script>
    $(document.body).click(function () {
        $("div:hidden:first").fadeIn("slow");
    });
    </script>
 
</form>
</body>
</html>
 

Fade toggle

Fade toggle will come in picture when we want to appear any HTML element slowly and after disappear again it will appear in interface(Just Toggle). In below I have given example code to do that.

<head runat="server">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
</head>
<body>
<form id="form1" runat="server">
<button>fadeToggle p1</button>
<p>This paragraph has a fast animation.</p>
<script>
    $("button:first").click(function () {
        $("p:first").fadeToggle("slow", "linear");
    });
</script>
</form>
</body>
</html>
 

Slide up down

Slide up down is one of most popular animation. In many web applications already we have seen this kind of animation. Now we will learn how to do this animation with few lines of code in JQuery.

<head runat="server">
 <style>
        div { background:#de9a44; margin:3px; width:80px;
        height:40px; display:none; float:left;
        }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>   Click me!
<div></div>
<div></div>
<div></div>
<script>
    $(document.body).click(function () {
        if ($("div:first").is(":hidden")) {
            $("div").slideDown("slow");
        } else {
            $("div").hide();
        }
    });
</script>
</form>
</body>
</html>
 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)