title: Slide inner div left infinite loop
body: <p>I have spent the last 3 hours trying to play with jquery and get this right with no luck and have google every possible combination of words to see I can find something similar to what i need. I know it will be really simple, my js is terrible</p>
  
  <p>GOAL: inner div needs to slide left with infinite loop. slider (outer div) has width of 1040px with overflow hidden. inner has width of 3198px with a background image. My goal right now is to have the inner div slide left with the same background image (360 photo) infinitely repeating as if it never ends. Below is my html markup</p>
  
  <pre><code>&lt;div class="slider"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.slider {
  position: relative;
  width: 1040px;
  height: 311px;
  overflow: hidden;
  }
  .inner {
  position: absolute;
  right: 0px;
  width: 3198px;
  height: 311px;
  background: url(img/VirtualTour_NormalLighting.jpg) no-repeat;
  } 
  </code></pre>
  
  <p>My ultimate goal: the first image is basically dead (has no lighting or color), the second has a fire lit up and lights on. As the div slides left, sections of the image needs to light up and the then behind it old sections needs to go back to greyscale. Hope that makes sense. Below are the two images:</p>
  
  <p><a href="http://dreamsynk.com/img/VirtualTour_NormalLighting.jpg" rel="nofollow">http://dreamsynk.com/img/VirtualTour_NormalLighting.jpg</a>
  <a href="http://dreamsynk.com/img/VirtualTour_ExtraLighting.jpg" rel="nofollow">http://dreamsynk.com/img/VirtualTour_ExtraLighting.jpg</a></p>
  
  <p>ANY help would be so helpful! Been struggling</p>
  
  <p>After some googling i found this:   </p>
  
  <pre><code>// retrieve the element
   element = document.getElementById("ani");
  
  // reset the transition by...
  element.addEventListener("click", function(e){
  e.preventDefault;
  
  // -&gt; removing the class
  element.classList.remove("delay-1");
  
  // -&gt; triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be     retriggered.
  element.offsetWidth = element.offsetWidth;
  
  // -&gt; and re-adding the class
  element.classList.add("delay-1");
  }, false);
  </code></pre>
  
  <p>Does exactly what i want accept it needs to be as the slide ends and not on click. Even with a timeout function or something so like the above activates after 40 seconds?</p>