Zoom In Animation

Published: 18/03/2009
 
The following shows how to animate a given HTML element using JQuery
 
Select a page element using the ID attribure of the given page element. Next we make sure that this element has a CSS rule "Position:absolute". This will allow the element to have a fit possition on the browser.
Next we set element to be position to the left and scroll 230px to the right.
 
var mainBlock = $('block');
mainBlock.css("position", "absolute");
mainBlock.fadeIn();
mainBlock.css("left", "0");
mainBlock.animate({"left": "+=230px"}, "slow");

I have also created a click action so further clicks will make the element zoom of the page and fade out.
mainBlock.click(function(){
mainBlock.animate({"left": "+=1000px"}, "slow");
mainBlock.fadeOut();
});
 

Related Posts

JQuery Toggle

Last Updated: 6/05/2010
Sometime a simple toogle needs a little more work. I was looking for a solution that allowed the toggle to fade a element and to slide a element. I found a great little Plugin from Gregoro Magini but it needed a little work to do what I wanted to do.
Read more...

 

Using AJAX on Forms

Last Updated: 29/04/2010
JQuery is a very flexible tool for managing form data. There is a plugin that allows JQuery to manage form data passing this data using AJAX.
Read more...

 

Editing CSS using JQuery

Last Updated: 5/06/2009
JQuery can be used to edit or CSS quick and easily. It's a truly amazing and simple tool that gives you peice of mind when dealing with cross compatibility.
Read more...