Jquery Basics Series - 3

Previous series I had discussed about jQuery effects. Now time to talk about custom animation with jQuery using animate(). This is very interesting using this we can make beautiful web projects.

Jquery Basics Series - 1
Jquery Basics Series - 2

Custom Animation with animate() $(selector).animate()
While clicking the anchor link class='animate' it's calling the class arrow adding animation effect.Take a look at live demo

<script type="text/javascript">
$(function() 
{
$('.animate').click(function()
{

$('.arrow').animate(
{
"paddingLeft": "800px",
"opacity": "0.0",
}, "slow" );

});
});
</script>
<a href="#" class="animate">animate()</a>
<div>
<span style="font-size:48px; font-weight:bold" class="arrow">==></span>
</div>

Jquery Color Plugin: Download Link

Change Background Color
Some readers asked to me how to change background color while clicking delete button Delete Records with Animation Effect using jQuery and Ajax. Usingjquery.color.js plug-in we can implement when delete it turns red background. Take a look at live demo

<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() 
{


$('#box').hover(function()
{
$(this).animate(
{
"backgroundColor": "#333333",
}, "slow" );
});


});
</script>
<div id="box"></div>

Working with Mouseover() and Mouseout() Events.

Take a look at live demo

<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#box').mouseover(function()
{
$(this).animate({
"backgroundColor": "#333333",
"borderBottomWidth": "20px",
"borderBottomColor":"#cc0000",
"color":"#ffffff"
}, "slow" );
}).mouseout(function()
{
$(this).animate({
"backgroundColor": "#96BC43",
"borderWidth": "3px",
"borderColor":"#333333",
"color":"#000000",
"borderBottomColor":"#333333",
}, "slow" );
});

});
</script>
<div id="box">9lessons.blogspot.com</div>

CSS Code

#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
font-size:46px;
font-weight:bold;
}