Question

I have a circular background image inside a div. to start off with i need to not have the ‘bubbles’ to display. and after arriving on that page the bubble would grow into place like a bubble or in other words ‘pop’ into place. I have no idea how i would go about creating this in jquery. this also needs to work on all browsers including ie7+ any help would be grateful

Answer 1

For the popping effect you really need to animate 4 different styles, depending on your CSS preference you can animate top and left or if you’re using margins (why?) margin-top and margin-left, this will give you the effect of the “bubble” expanding center outwards instead of top left to bottom right.

This is a jQuery example for top/left

var newHeight = 300;
var newWidth = 300;

jQuery('#element').animate({
    "top":newHeight/2,
    "left":newWidth/2,
    "height":newHeight,
    "width":newWidth,
    "opacity":1
}, 'fast', easeInOutCirc);

You may find the easing effects here: http://gsgd.co.uk/sandbox/jquery/easing/

its worth noting you should be a little more specific with your questions, we’re not mind readers 🙂