一旦到達屏幕的一側，如何反轉移動div的方向？

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() （ mdn reference ）來計算動畫對象的位置。

然后，如果對象向左移動並且其left距離小於其自身寬度，則需要僅移動它以使其到達邊緣。 如果它在邊緣（ left為零），則需要改變方向。

如果它向右移動並且其right距離小於它自己的寬度，則需要移動它（由window.innerWidth - 100計算，因為100是對象的寬度），以便它到達邊緣。 如果它在右邊緣，你需要改變方向。

改變傳遞給jQuery的animate函數的對象的方向是一個簡單的事情，即添加或減去它的“right”屬性。

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包含起始位置。

希望這會幫助你。