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