title: Delay occurring during horizontal slide in Chrome only
body: <p>I'm creating this website where the pages slide horizontally. One of the pages (media) 
  contains 10-15 pictures that are 60px in height and 80 px in width. The problem is when I make the pages "travel" from home to contact us, there's a slight delay in sliding caused by Media page in Chrome. However I noticed this slight delay isn't in Firefox or IE, in fact it goes smoothly. So I'm wondering if there's a fix other than re-sizing since I already made all of the pictures in smaller sizes (60kb or so).</p>
  
  <p>Thank you for any suggestions in advance</p>
  
  <p>The format is basically like this:</p>
  
  <pre><code>&lt;div class="pannel"&gt;&lt;br/&gt; &lt;br/&gt;
      &lt;a href="images/a (74).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (74).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (75).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (75).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (76).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (76).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (77).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (77).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (78).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (78).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (79).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (79).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (80).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (80).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (81).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (81).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (82).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (82).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (83).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (83).jpg"/&gt;&lt;/a&gt;
      &lt;a href="images/a (84).jpg" class="mediaPhotos"&gt;&lt;img src="images/a (84).jpg"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.panel {    
      float               : left;
      height              : 800px;
      padding-right       : 1000px;
      width               : 850px;
  }
  
  .mediaPhotos img {
      border              : 3px solid #bfb886;
      border-radius       : 5px;
      height              : 60px;
      width               : 80px;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>$(document).ready(function() {
   $("#menuFloat a").bind("click",function(event){ event.preventDefault();
    var target = $(this).attr("href");
     $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200);
   }); }); 
  </code></pre>
  
  <hr>
  
  <p>Basically <code>panel</code> is how big each page will be and float to the left of each page. </p>
  
  <p>Link: <a href="http://permika-montreal.tk/new.php" rel="nofollow">http://permika-montreal.tk/new.php</a></p>