jQuery反弹忽略定位

问题描述：

我有一个问题，试图使用相对定位的div内的绝对位置div jQuery效果“反弹”。 #Bounce div被定位为稍高于容器div，并且当接收到某个消息时，它应该在其上反弹。但最终发生的事情是，#bounce div下降到容器div并在其内部弹跳，直到它停止，然后正确地重新定位在容器div的顶部。这个相同的代码在Firefox中工作，但似乎没有在Webkit或IE中工作。jQuery反弹忽略定位

任何人都可以帮助我理解为什么会发生这种情况吗？

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>

答

这里是围绕我终于想出了工作。我很想知道为什么“正确”的方式不起作用。但至少我发现了一些使它工作的东西。

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

这有助于解决类似的问题，其中弹跳和摇动效果在效果的末尾或中间失去左/右/上/下定位。 – stevecomrie 2012-07-30 18:26:05

答

我知道这个线程是老了，但我只是碰到了类似的问题，我相信这是因为我的“反弹”元素经右/上绝对定位。

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

一旦我改变它使用左/顶部它在IE中工作正常。不知道这是否与您的问题相同，或者其他人是否看到过这一点，但它对我有用。

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

不知道为什么这是一个问题，所以如果其他人不知道，请发表评论！

jQuery反弹忽略定位

相关推荐