Bouncing div not working

Question

In my application I have a div that is hidden to 90%. The rest of the div is revealed if you click on the part you see. The div slides down 200px and when it's all down I want it to bounce a couple of times. Below is the code, but by some reason the bouncing doesn't work.

I would really appreciate if someone could help me out!

    var boxDown = false;

    $('#uploadContainer').click(function(){
        if (boxDown === false) {
            $(this).animate({
                'marginTop': "+200px"
            });
            $(this).effect("bounce", { times:3 }, 300);


            boxDown = true;
        }
        else {
            $(this).animate({
                'marginTop': "-=200px"
            });

            boxDown = false;
        }
    });

Answer 1

Personally, I would use jQuery easing function: http://gsgd.co.uk/sandbox/jquery/easing/

look at the easeOutBounce one

You use it like this:

    $('#my-item').animate(
    { 
        'margin-top': -110
    }, 1000, 'easeOutBounce');

Answer 2

It should work as expected holyredbeard...

Check out this jsFiddle that depicts your code. All works as supposed.

Maybe you're not loading jQuery UI?

Answer 3

Not sure if this is the effect you desired, it's bouncing for me: http://jsfiddle.net/drAXv/

I'm guessing that you didn't implement the .ready() function?