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>
