Make background image slide from right to left on click

Question

When I click on the menu icon, I want the background to slide from right to left. What should I put after $('html').css('background-image', 'url(img/Home1.jpg)');.

  $(document).ready(function (){
           $('.home').click(function(){
               $('html').css('background-image', 'url(img/Home1.jpg)');
               $('#content').css('background-color','#57A7B3');
               $('#content').css('opacity','0.7');
               $('#content').html('<div><iframe src="Home.html" width = "960px" height = "651px"   frameborder="0" seamless></iframe></div>');

            });

   });
   $(document).ready(function (){
       $('.profile').click(function(){

           $('html').css('background-image', 'url(img/Profile1.jpg)');
           $('#content').css('background-color','#A979B3');
           $('#content').css('opacity','0.7');
           $('#content').html('<div><iframe src="Profile.html" width = "960px" height = "651px" frameborder="0" seamless></iframe></div>');
        });

   });


<div id="menu">
              <ul id="list-images">
                <li class="home"><center><a  href="#"><img src="Icons/co1.png"/></a></center></li>   
                <li class="profile"><center><a href="#"><img src="Icons/co2.png"/></a></center></li>             
                <li class="expertise"><center><a href="#"><img src="Icons/co3.png"/></a></center></li>
                <li class="portfolio"><center><a href="#"><img src="Icons/co4.png"/></a></center></li>               
                <li class="clients"><center><a href="#"><img src="Icons/co6.png"/></a></center></li>
                <li class="connect"><center><a href="#"><img src="Icons/co5.png"/></a></center></li>    
             </ul>
    </div>