jQuery Bounce 忽略定位答案

【问题标题】：jQuery Bounce ignores positioningjQuery Bounce 忽略定位
【发布时间】：2023-04-01 06:54:02
【问题描述】：

我在尝试在相对定位的 div 内的绝对位置 div 上使用 jQuery 效果“反弹”时遇到问题。 #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>

【问题讨论】：

标签： jquery css jquery-ui

【解决方案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);});

【讨论】：

这帮助我解决了一个类似的问题，即反弹和抖动效果在效果的末尾或中间丢失了左/右/上/下定位。

【解决方案2】：

我知道这个帖子很旧，但我刚刚遇到了一个类似的问题，我相信这是因为我的“反弹”元素绝对是通过右/上定位的。

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

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

【讨论】：