Question

How do I add an if statement when the right image is at +400px, then animate back to -400px… when hovering the right image?

$('#left img').mouseenter(function() {
  $('#right img').animate({
    left: '+=400px'
  }, 700);                            

});
$('#right img').mouseenter(function() {
  $('#left img').animate({
    left: '-=400px'
  }, 700);

});

Something similar to this.
(the two main images on the site)

Answer 1

Why simply not use: mouseleave

$("#left img").mouseenter(function(){
     //+400
    }).mouseleave(function(){
      //-400
    });

Peraphs is the same of mouseover / mouseout AND hover