This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Saturday, November 26, 2011

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

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 livedemo

<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 PluginDownload 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
Using jquery.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;
}

Working with Keyup() Event


Take a look at this following link I had given code and nice demo.
Live Preview with jQuery

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More