Question

我有一个绝对定位的div，它使用jQuery .animate函数从屏幕的右侧向左侧水平移动。我的问题是，一旦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/

谢谢，我真的很感谢你的帮助！

Answer 1

可能你应该这样试试：

$('.block').click(function() {
    var leftPosition = $(this).position();
    if (leftPosition.left > 100) {
        $(this).animate({"right": "+=100px"},"slow");
    } else {
        $(this).animate({"right": "-=100px"},"slow");
    }
});

当元素靠近边界时，代码的if..else部分将反转方向。

这是一个小提琴，尝试点击红色框以了解它是如何工作的： https://jsfiddle.net/dimitrioglo/ebkc9dzL/14/

Answer 2

工作小提琴：https://jsfiddle.net/ebkc9dzL/19/

你需要在click函数之外有一个变量来告诉你动画的方向，这样一旦进入click函数，你可以使用getBoundingClientRect()计算动画对象的位置（{{3} }）。

然后，如果对象向左移动并且其left距离小于其自身宽度，则需要将其移动到足以使其到达边缘。如果它在边缘（left为零），则需要改变方向。

如果它向右移动且其right距离小于其自身宽度，则需要移动它（仅由window.innerWidth - 100计算，因为100是对象的宽度）所以它来到了边缘。如果它在右边缘，你需要改变方向。

更改传递给jQuery的animate函数的对象的方向是一个简单的事情，即添加或减去它的＆＃34;权利＆＃34;属性。

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

Answer 3

在这里：jsFiddle。

新的javascript如下：

var goLeft = true;  
$('.block').click(function() {
    var animateDist = 100;

    var distLeft = $(this).position().left;
    var distRight = window.innerWidth - distLeft;

    if (goLeft) {
        if (distLeft < 100) {
            animateDist = "+="+distLeft+"px";
            $(this).animate(
                {"right": animateDist},"slow"
            );
            goLeft = false;
        } else {
            $(this).animate(
                {"right": "+=100px"},"slow"
            );
        }
    } else {
        if (distRight < 100) {
            animateDist = "-="+distRight+"px";
            $(this).animate(
                {"right": animateDist},"slow"
            );
            goLeft = true;
        } else {
            $(this).animate(
                {"right": "-=100px"},"slow"
            );
        }
    }
});

这并不完美，您需要调整内部窗口宽度以匹配父容器，但这足以让您朝着正确的方向前进。

祝你好运！

Answer 4

试试这段代码：

var sign = [ "+" , "-" ];
var signPosition = 0;
var maxOffset = $(".block").offset().left;
$('.block').click(function() {
    if ($(this).offset().left < 100) {
        signPosition = 1;
    } else if ($(this).offset().left == maxOffset) {
        signPosition = 0;
    }
    $(this).animate(
        {"right": sign[signPosition] + "=100px"},"slow");
});

变量sign是包含元素可能移动的方向的数组，变量signPosition包含当前使用的方向的位置，变量maxOffset包含起始位置。

希望这会对你有所帮助。

一旦到达屏幕的一侧，如何反转移动div的方向？

4 个答案: