Question

我正在尝试动画一个绝对定位并位于左下方位置的元素。

CSS

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

JS

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

我目前的问题是，某些浏览器（Chrome / Safari）会激活CSS，因为它会动画，导致对象跳过屏幕。

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

另外，我无法将.css()放在.animate()的完整函数中，因为当前的左下角定位会影响它的动画效果。

感谢您的帮助！

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

Answer 2

你应该使用一个超时函数来解决CSS有时间加载的问题:) 谷歌吧:)）

Answer 3

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

应该是：

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

不应该吗？

当元素具有底值时，动画显示最高值

3 个答案: