How to reverse direction of moving div once it reaches side of screen?

Question

I have an absolutely positioned div that uses the jQuery .animate function to move horizontally from the right to left of the screen. My problem is that once the div reaches the far left side, it continues and eventually disappears from the screen. How do you make it so that once the div reaches the left side, it will reverse and start going to the right? (and then vice versa so that the right side won't continue going right, but goes left again once it reaches the end)

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

Here is my JSFiddle: https://jsfiddle.net/ebkc9dzL/

Thank you I really appreciate the help!

Answer 1

may be you should try like this:

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

when the element is close to the border the if..else part of the code will reverse the direction.

Here is a fiddle, try to click on the red box to get an idea on how it works: https://jsfiddle.net/dimitrioglo/ebkc9dzL/14/

Answer 2

Working fiddle: https://jsfiddle.net/ebkc9dzL/19/

You need to have a variable outside the click function that will tell you the direction of the animation, so that once inside the click function you can calculate the location of the animated object using getBoundingClientRect() (mdn reference).

Then, if object is moving left and its left distance is less than its own width, you need to move it only enough so that it comes to the edge. If it's AT the edge (left is zero), you need to change the direction.

If it's moving right and its right distance is less than its own width, you need to move it only enough (calculated by window.innerWidth - 100, since 100 is width of your object) so that it comes to the edge. If it's AT the right edge, you need to change direction.

Changing direction in object you pass to jQuery's animate function is a simple matter of adding or subtracting from its "right" attribute.

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