Zoom In AnimationPublished: 18/03/2009The 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 PostsJQuery ToggleLast 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 FormsLast 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 JQueryLast 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... |
