create a div that would grow as if it is a bubble

I have a circular background image inside a div. to start off with 开发者_StackOverflowi 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

jQuery show() function

jQuery animate

These should give you an idea. You might also consider using images to illustrate what you're trying to achieve.

I recommend building the content you need, and then asking people how you can change it to get the results you want. That will be easier for people to answer.

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 :)

This is a simplified version of this fiddle where I did something very similar to what you're doing. Hope it helps.

function(){
    var position = $('#bubbleposition'),
        bubble = $('#bubble'),
        startRadius = 200,
        newRadius = 400,
        startleft = 10,
        starttop = 10,
        endleft = 50,
        endtop = 50;
    position.css({left: startleft, top: starttop, 10)});
    bubble.css({height: startRadius, width: startRadius});
    position.animate({left: endleft, top: endtop});
    bubble.animate({height: newRadius, width: newRadius}, 400);
}

<div id='bubbleposition'>
    <div id='bubble'>
        Hello!
    </div>
</div>