jQuery Bounce ignores positioning

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; ">开发者_JS百科; ...
    <div id="Bounce" style="bottom: 28px; right: 0px; height: 26px; width: 26px; z-index: 989; display: none; position: absolute; ">...</div>
</div>

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);});

I know this thread is old, but I just bumped into a similar issue and I believe it was because my 'bounce' element was absolutely positioned via right/top.

#bounce_me
{
  position:absolute;right:0px;top:-45px;
  width:90px;height:90px;
  background-image:url(../../images/alarm.png);
  cursor:pointer;
}

Once I changed it to use left/top it worked fine in IE. Not sure if this was the same as your issue, or if anyone else has seen this, but it worked for me.

#bounce_me
{
  position:absolute;left:-90px;top:-45px;
  width:90px;height:90px;
  background-image:url(../../images/alarm_90_unsaturated.png);
  cursor:pointer;
}

No clue why this is an issue, so if anyone else does know, please comment!