Question

我在尝试使用jQuery效果“反弹”在相对定位的div内的绝对位置div时遇到问题。 #Bounce div的位置略高于容器div，当收到某个消息时，它应该在它上面反弹。但最终发生的事情是#bounce div下降到容器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'元素是通过右/顶部绝对定位的。

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

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

jQuery Bounce忽略了定位

2 个答案: