Question

我需要使用Jquery animate函数移动相对于其父级的绝对div。如何限制CSS对象文字左+ = -600px，以便左边的定位到达宽度的末尾时停止？换句话说，我想限制元素的左侧定位，以便它不会一直离开页面并离开视图。谢谢你的帮助

Answer 1

$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]);

或者，如果你的意思是元素拥有宽度：

$(this).animate({'left': '-'+$(this).width()}, [time in ms]);

Answer 2

您可以使用jQuery animate的{{1}} - 函数来检查元素是否已到达页面边缘并应停止。 HERE是一个小提琴，它演示了如何在达到限制时使用step函数停止动画。

step

步进功能为您提供了一种在必要时逐步控制动画的好方法。请阅读here了解详情。

Answer 3

要使它在父级中排成一行，您需要从父级宽度中减去子宽度，如下所示：

$(document).ready(function(){
var childWidth = $('#child').width();
var parWidth = $('#child').parents('#parent').width();
var offSet = parWidth - childWidth;

$('#child').animate({
    left: '+=' + offSet  
}, 1000);

});

示例HTML：

<div id="parent">
    <div id="child">
      I've been a bad child.  
    </div>    
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}
#parent {
  width: 600px;
  height: 200px;
  background: green;  
  position: relative;  
}

#child {
  position: absolute;
  background: red;
  width: 100px;
  height: 200px;        
}

See this JSFiddle进行演示。

Answer 4

嗯，你没有提供任何代码，所以我唯一的猜测就是你误解了jQuery的animate函数是如何工作的。实际上jQuery的动画功能完全符合你的要求。它会将您想要的元素的属性增加到您想要的范围。也就是说，除非你想要它，否则它不会继续将它从页面上移开并离开视图。 Here了解它是如何运作的。

如何Jquery动画CSS左边的值到元素的宽度？

4 个答案: