当元素具有底部值时动画到顶部值答案

【问题标题】：Animate to top value when element has a bottom value当元素具有底部值时动画到顶部值
【发布时间】：2011-04-01 13:50:44
【问题描述】：

我正在尝试为绝对定位和定位在底部和左侧的元素设置动画到顶部和右侧的位置。

CSS

.obj{
  position: absolute;
  bottom: 0;
  left: 200px; 
}

$('.obj').click(function(event){
    $(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});
});

我目前的问题是某些浏览器（Chrome/Safari）会在 CSS 动画时触发 CSS，从而导致对象在屏幕上跳跃。

编辑：似乎清除了底部和左侧的值，然后从top: 0, right: 0开始动画。

另外，我不能将.css() 放在.animate() 的完整函数中，因为当前的底部和左侧位置会影响它的动画效果。

感谢您的帮助！

【问题讨论】：

在 animate() 之前链接 css 函数是否会产生相同的结果？
是的，无论你如何链接它，它似乎是在 Chrome/Safari 中首先设置 .css()。
对您来说“飞”是指立即跳跃？如果是的话，我看不出这个css调用会如何。你能描述一下当你删除它时会发生什么，或者在线提供一个例子（以 JSFiddler 为例）
哈哈，是的，跳跃似乎更好地描述了它。它从当前位置跳到top:0, right:0 并从那里开始动画。
正如我之前所说，我看不出它现在的行为以及没有样本的情况下应该如何。所以我认为可以在这里做的是尝试使用“absolutize”函数（基本上，它来自prototypeJS，但它在jQuery中有端口）。您可以：1）将所有开始和结束位置转换为绝对坐标（左和上），这将简化翻译，或 2）编写您自己的 right_absolutize() 函数，将开始坐标转换为 top%-rightPx 坐标。这是相当蛮力的，但我现在只能想到没有在线示例。

标签： javascript jquery

【解决方案1】：

您可以将动画设置为相对于起始位置，或者在本例中以左下角为基础，以使其在 chrome 中更好地滑动。

$('div.obj').click(function(event){
    var obj = $(this);
    var top = obj.context.offsetTop;
    var right = obj.context.offsetParent.clientWidth - (obj.context.offsetLeft*2);
    obj.animate({bottom:top+'px', left: right+'px' }, 400);
});

【讨论】：

谢谢！我还没有实现它，但我认为根据顶部和右侧计算底部和左侧应该可行。

【解决方案2】：

您应该使用超时功能来使 CSS 有时间加载 :) 谷歌它:)

【讨论】：

【解决方案3】：

$(this.animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

应该是：

$(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

不应该吗？

【讨论】：

我在这里写的时候打错了。已修复，但问题依然存在。