jQuery Bounce ignores positioning

Question

I'm having a problem trying to use the jQuery effect "bounce" on an absolutely position div inside of a relatively positioned div. The #Bounce div is positioned to be slightly above the container div and when a certain message is received it is supposed to bounce on top of it. But what ends up happening is that the #bounce div drops down into the container div and bounces inside of it till it stops and then correctly repositions itself on top of the container div. This same code is working in Firefox but doesn't seem to be working in Webkit or IE.

Can anyone help me understand why this is happening?

if (jQuery("#Bounce").data("bouncing") == false || jQuery("#Bounce").data("bouncing") == undefined) {
        jQuery("#Bounce").show().effect("bounce",{times:10,distance:50},300,function(){jQuery("#Bounce").data("bouncing", false);});
        jQuery("#Bounce").data("bouncing", true);
}


<div id="Container" style="height: 28px; float: right; position: relative; top: 2px; cursor: pointer; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 3px; "> ...
    <div id="Bounce" style="bottom: 28px; right: 0px; height: 26px; width: 26px; z-index: 989; display: none; position: absolute; ">...</div>
</div>

Answer 1

Here's the work around I eventually came up with. I'd love to know the reason why the "proper" way didn't work. But at least I found something that made it work.

jQuery("#ActivEngageBounce").fadeIn(100).animate({bottom:"+=50px"},100).animate({bottom:"-=50px"},100).animate({bottom:"+=40px"},100)
                        .animate({bottom:"-=40px"},100).animate({bottom:"+=30px"},100).animate({bottom:"-=30px"},100).animate({bottom:"+=20px"},100)
                        .animate({bottom:"-=20px"},100).animate({bottom:"+=10px"},100).animate({bottom:"-=10px"},100,"swing",function(){jQuery("#ActivEngageBounce").data("bouncing", false);});