title: Stop image blinking on image slideshow
body: <p>I'm creating an image slideshow, however, I have come across a problem.Every time I click to move the slideshow the next image blinks.How do I avoid this I would like it to just slide in smoothly.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
    $('#checkbox').change(function() {
      setInterval(function() {
        moveRight();
      }, 3000);
    });
  
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var sliderUlWidth = slideCount * slideWidth;
  
    $('#slider').css({
      width: parseInt(slideWidth) * 3 +"px",
    });
  
    $('#slider ul').css({
      width: sliderUlWidth
    });
  
    $('#slider ul li:last-child').prependTo('#slider ul');
  
    function moveLeft() {
      $('#slider ul').animate({
        left: +slideWidth
      }, 200, function() {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
      });
    };
  
    function moveRight() {
      $('#slider ul').animate({
        left: -slideWidth
      }, 200, function() {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
      });
    };
  
    $('a.control_prev').click(function() {
      moveLeft();
    });
  
    $('a.control_next').click(function() {
      moveRight();
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
  html {
    border-top: 5px solid #fff;
    color: #2a2a2a;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans';
  }
  
  h1 {
    color: #fff;
    text-align: center;
    font-weight: 300;
  }
  
  #slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto 0 auto;
    border-radius: 4px;
  }
  
  #slider ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: auto;
    list-style: none;
  }
  #slider ul li img{
    max-width:100%;
    line-height: 0;
  }
  #slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 33.33%;
    height: auto;
    background: #ccc;
    text-align: center;
    line-height: 0;
  }
  
  a.control_prev,
  a.control_next {
    position: absolute;
    z-index: 999;
    padding: 0% 0%;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.1;
    cursor: pointer;
    top: 0;
    display: block;
    width: 33.33%;
    height: 100%;
  }
  
  a.control_prev:hover,
  a.control_next:hover {
    -webkit-transition: all 0.2s ease;
  }
  
  a.control_prev {}
  
  a.control_next {
    right: 0;
  }
  
  .slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
  }</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;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Very Simple Slider&lt;/title&gt;
  
  
  
    &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;&amp;nbsp;&lt;/h1&gt;
    &lt;div id="slider"&gt;
      &lt;a href="#" class="control_next"&gt;&lt;/a&gt;
      &lt;a href="#" class="control_prev"&gt;&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;img src="https://orig00.deviantart.net/e3bb/f/2012/155/0/c/naruto_unleashed_by_sketch_gfx-d529cho.png"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="https://assets.rbl.ms/6450955/980x.jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="http://tampascene.com/images/new-images/parks-weedonisland.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="slider_option"&gt; &lt;/div&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  
  
    &lt;script src="js/index.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am not sure how to do this if you have any guides or pointers it would be great And if this question needs improving it wouldn't hurt just trying to tell me instead of just downvoting I am only 13 years and still learning Thank You in advance.</p>