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 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 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. 
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

Posted in: jQuery