JQuery Bounce игнорирует позиционирование

Question

У меня возникла проблема при попытке использовать эффект "отскока" jQuery для абсолютно позиционного div внутри относительно позиционированного div. Div #Bounce располагается немного выше контейнера div, и при получении определенного сообщения оно должно подпрыгивать поверх него. Но в конечном итоге происходит то, что div #bounce падает в контейнер div и подпрыгивает внутри него до тех пор, пока не остановится, а затем правильно переместится поверх контейнера div. Этот же код работает в Firefox, но, похоже, не работает в Webkit или IE.

Может кто-нибудь помочь мне понять, почему это происходит?

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

Вот работа, которую я в конце концов придумал. Я хотел бы знать причину, по которой «правильный» способ не сработал. Но, по крайней мере, я нашел кое-что, что заставило это работать.

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

Answer 2

Я знаю, что эта ветка старая, но я столкнулся с подобной проблемой, и я полагаю, что это потому, что мой элемент 'bounce' был абсолютно позиционирован через right / top.

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

Как только я изменил его на использование left / top, он отлично работал в IE. Не уверен, было ли это так же, как ваша проблема, или кто-то еще видел это, но у меня это сработало.

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

Понятия не имею почему это проблема, поэтому, если кто-то еще знает, пожалуйста, прокомментируйте!