title: jQuery – How to move object to the left and right
body: <p>I am pretty sure it's a very very easy question, but even after several hours of reading through Stackoverflow/Google.. still no luck.</p>
  
  <p>How to create the effect of moving object like this carousel at the end of the website.</p>
  
  <p><a href="http://wp1.themexlab.com/html/digital-media/index.html" rel="nofollow">Digital Media</a></p>
  
  <p>Effect of hand by clicking left(Of the Mouse) and move the object on both sides.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/** page structure **/
  #w {
    display: block;
    width: 750px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 45px;
  }
  
  #content {
    display: block;
    width: 100%;
    background: #fff;
    padding: 25px 20px;
    padding-bottom: 35px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  }
  
  /** client logos **/
  #clients {
    display: block;
    margin-bottom: 15px;
  }
  
  #clients .clients-wrap {
    display: block;
    width: 700px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  #clients .clients-wrap ul {
    display: block;
    list-style: none;
    position: relative;
  }
  
  #clients .clients-wrap ul li {
    display: block;
    float: left;
    position: relative;
    width: 140px;
    height: 55px;
    line-height: 55px;
    text-align: center;
  }
  #clients .clients-wrap ul li img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65); 
    opacity: 0.65;
  }
  #clients .clients-wrap ul li img:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100); 
    opacity: 1.0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="w"&gt;
    &lt;div id="content"&gt;
      &lt;div id="clients"&gt;
        &lt;h3&gt;Past &amp;amp; Present Clients&lt;/h3&gt;
        &lt;div class="clients-wrap"&gt;
          &lt;ul id="clients-list" class="clearfix"&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!-- @end .clients-wrap --&gt;
      &lt;/div&gt;&lt;!-- @end #clients --&gt;
    &lt;/div&gt;&lt;!-- @end #content --&gt;
  &lt;/div&gt;&lt;!-- @end #w --&gt;</code></pre>
  </div>
  </div>
  </p>