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

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: http://ift.tt/1OXC4pv

Thank you I really appreciate the help!