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>

來源

2010-03-17 ashansky

這裏是圍繞我終於想出了工作。我很想知道爲什麼「正確」的方式不起作用。但至少我發現了一些使它工作的東西。

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

來源

2010-03-18 17:00:20 ashansky

這有助於解決類似的問題，其中彈跳和搖動效果在效果的末尾或中間失去左/右/上/下定位。 – 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; 
}

不知道爲什麼這是一個問題，所以如果其他人不知道，請發表評論！

來源

2011-07-18 21:43:02 ssawchenko

jQuery反彈忽略定位

回答

相關問題