I had a problem trying to use the jQuery bounce effect on the absolute position of a div inside a relatively positioned div. The #Bounce div is located just above the div container, and when a specific message is received, it should bounce on top of it. But what ends up is that the #bounce div falls into the div container and bounces inside it until it stops, and then correctly repositions itself on top of the div container. The same code works in Firefox, but doesn't seem to work in Webkit or IE.
Can someone 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>
source
share