title: slide image from left to right and reverse back again
body: <p>I am trying to slide image from left to right and after a set point it should again slide in reverse direction. This is my code somehow its not working as i am going wrong somewhere in the if statement.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
      var x = 0;
      var y = 0;
      //cache a reference to the banner  
      var banner = $("#banner");
      // set initial banner background position  
      banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
      // scroll up background position every 90 milliseconds  
      window.setInterval(function() {
          banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
          x++;
          //x--;  
          //if you need to scroll image horizontally -  
          // uncomment x and comment y  
      }, 90);
      if ($(banner.offset().left &gt; 40) {
          banner.css("backgroundPosition", "0px 0px ");
      }
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#banner {
    width: 960px;
    height: 200px;
    margin: auto;
    background: url(http://cdn-careers.sstatic.net/careers/gethired/img/companypageadfallback-leaderboard-2.png?v=59b591051ad7) no-repeat 0 0;
  }
  div#banner p {
    font: 15px Arial, Helvetica, sans-serif;
    color: white;
    position: relative;
    left: 20px;
    top: 120px;
    width: 305px;
    padding: 20px;
    background: black;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 20px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="banner"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>