Как изменить направление перемещения div, когда оно достигает стороны экрана?

У меня есть абсолютно позиционированный 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/

Спасибо, я очень ценю помощь!

Ответ 1

Рабочая скрипка: https://jsfiddle.net/ebkc9dzL/19/

Вам нужно иметь переменную вне функции щелчка, которая будет указывать направление анимации, так что один раз внутри функции щелчка вы можете вычислить местоположение анимированного объекта с помощью getBoundingClientRect() (ссылка mdn).

Затем, если объект движется влево, а его расстояние left меньше его собственной ширины, вам нужно переместить его достаточно, чтобы он доходил до края. Если на AT край (left равен нулю), вам нужно изменить направление.

Если он перемещается вправо, а его расстояние right меньше его собственной ширины, вам нужно переместить его только достаточно (вычислено window.innerWidth - 100, так как 100 - это ширина вашего объекта), чтобы он доходил до края. Если он на правом краю, вам нужно изменить направление.

Изменение направления в объекте, которое вы передаете функции jQuery animate, является простым вопросом добавления или вычитания из его "правильного" атрибута.

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

Ответ 2

Возможно, вам стоит попробовать:

$('.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/

Ответ 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"
            );
        }
    }
});

Это не идеально, вам нужно настроить внутреннюю ширину окна в соответствии с родительским контейнером, но этого достаточно, чтобы вы оказались в правильном направлении.

Удачи!

Ответ 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 содержит начальную позицию.

Надеюсь, это поможет вам.