Jquery Basics Series - 3
Wall Script
Follow Me:
Monday, November 16, 2009

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.




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. 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">www.9lessons.info</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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


8 comments:

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

    ReplyDelete
  2. 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 !!!

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

    ReplyDelete
  4. I'm really want you write more jquery Tutorials which targets to beginners so that jquery becomes easy for us. Waiting for your response

    ReplyDelete
  5. Ya sure. Soon I'm writing about android development

    ReplyDelete
  6. very nice blog,
    can u see my blog, give guidance for me.
    http://www.addcolours.com/blog

    ReplyDelete
  7. This tutorial helps me lots.
    Its may help our user to reduce mistake of number typing.Great tutorial

    ReplyDelete
  8. can we write a sql query in to the button event.

    ReplyDelete

Make in India