title: jQuery fade li element and cycle it when mouse hovered
body: <p>I'm trying to recreate an effect in jQuery, where an element (<code>&lt;li&gt; &lt;img&gt;</code>) will be cycled and has a fading effect when hovered. The '<code>&lt;li&gt;</code>' contains '<code>&lt;img&gt;</code>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<code>&lt;ul&gt;</code>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list. </p>
  
  <p>My Existing Code:
  <a href="http://pastebin.com/zZWp2gzC" rel="nofollow noreferrer">link text</a></p>
  
  <p>My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another. 
  Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element. </p>
  
  <p>I don't know if the 'Cycle Plugin' (<a href="http://jquery.malsup.com/cycle/" rel="nofollow noreferrer">Plugin Home Page</a>) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem. </p>
  
  <p>Thanks and merry xmas!</p>
  
  <hr>
  
  <p>Edits</p>
  
  <p>remove and added a link </p>