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.
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>
$(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>
<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>
<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;
}
{
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.
Hmm, do you really want to spec css options inside the JS... think http://plugins.jquery.com/project/classAnim is a better way of addressing custom css animation. Good work though!
IT´s a good tutorial !! really jquery is a powerfull tool for web design. I hope some day you can show a lesson for use jquery mixed, I mean, so many jquery together, in one page. I use so much your examples, so, I have problem when I try to use or call a jquery inside a page created across jquery, never works, so, for this reason I am expecting some lesson about it. Thank you very much for share this !!!
jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
I'm really want you write more jquery Tutorials which targets to beginners so that jquery becomes easy for us. Waiting for your response
Ya sure. Soon I'm writing about android development
very nice blog,
can u see my blog, give guidance for me.
http://www.addcolours.com/blog