我有一个绝对定位的div,它使用jQuery .animate函数从屏幕的右侧向左移动.
我的问题是,一旦div到达最左边,它会继续,最终从屏幕上消失.如何做到这一点,一旦div到达左边,它会反转并开始向右边？ (然后反之亦然),右侧将不会继续向右,但一旦达到目的,再次向左移动)
我的问题是,一旦div到达最左边,它会继续,最终从屏幕上消失.如何做到这一点,一旦div到达左边,它会反转并开始向右边？ (然后反之亦然),右侧将不会继续向右,但一旦达到目的,再次向左移动)
HTML：
<div class="container">
<div class="block"></div>
</div>
CSS：
.block {
float:right;
position:absolute;
right:100px;
width:100px;
height:100px;
background:red;
}
jQuery的：
$('.block').click(function() {
$(this).animate(
{"right": "+=100px"},"slow");
});
这是我的JSFiddle：https://jsfiddle.net/ebkc9dzL/
谢谢我真的很感谢帮忙！
解决方法
工作小提琴：
https://jsfiddle.net/ebkc9dzL/19/
您需要在点击功能之外有一个变量,它将告诉您动画的方向,因此一旦在点击功能中,您可以使用getBoundingClientRect()(mdn reference)计算动画对象的位置.
然后,如果对象向左移动,并且其左距离小于其自己的宽度,则需要将其移动到足以使其到达边缘.如果它在边缘(左边是零),你需要改变方向.
如果它正在移动,其正确的距离小于自己的宽度,则只需要移动它就足够了(由window.innerWidth – 100计算,因为100是对象的宽度),以便它到达边缘.如果它在右边,你需要改变方向.
传递给jQuery的动画功能的对象的改变方向是从其“右”属性中添加或减去的一个简单问题.
var direction = "+";
$('.block').click(function() {
var obj = {},distance = 100,rect = this.getBoundingClientRect();
if(direction=="+"){
if(rect.left>0 && rect.left < 100)
distance = rect.left;
else if(rect.left<=0)
direction = "-";
}
else {
if(rect.right >(window.innerWidth-100) && rect.right+1<window.innerWidth)
distance = (window.innerWidth-rect.right);
else if(rect.right+1 >=window.innerWidth){
direction = "+";
}
}
obj = {"right": direction+"="+distance.toString()+"px"}
$(this).animate(obj,"slow");
});
