jquery if statement animate back

Question

how do i add a 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 - http://www.hyundaiusa.com/ (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