Question

I have a div which move from up to bottom before bounce, i need to make the distance of the move bigger. My actual code is this:

HTML:

<div id=popup>
    <p>Please, choose what type of puzzle you'd like to play</p>
</div>

jQuery:

       $(document).ready(function(){    
           $('#popup').show('bounce', { times:3 }, 300);
            });

i tried to add the distance argument but it doesn’t do what i need.

       $(document).ready(function(){    
           $('#popup').show('bounce', { times:3 , distance: 200 }, 300);
        });//No effect what ever value i give to the `distance` argument.

You can see the demo i am following. I need to move it to the center of the page (from top to center) before it gets bounced. Thanx in advance.

Answer 1

What you are asking is not really clear … Still I think this should help :

Javascript

$('#popup').animate({
    top: (($(window).height()/2) - ($('#popup').outerHeight()/2)
)}, 2000, 'easeOutBounce');

Easing functions can be found HERE