title: Simple jquery Slider with CSS animation
body: <p>I am trying to make a image slider with some css animation but I can not figure out the part where i need to add and remove my css class 
  basically i need to add the css animation class to the h1 when the imagelisder is completely loaded, remove it when the next slide is about to be shown , add it again to the next slider </p>
  
  <p>here is the code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  $(function() {
  
      //settings for slider
      var width = 720;
      var animationSpeed = 1000;
      var pause = 6000;
      var currentSlide = 1;
  
      //cache DOM elements
      var $slider = $('#slider');
      var $slideContainer = $('.slides', $slider);
      var $slides = $('.slide', $slider);
  
      var interval;
  
      function startSlider() {
       $('h1').addClass('sliderCaption');
          interval = setInterval(function() {
              $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                  if (++currentSlide === $slides.length) {
                      currentSlide = 1;
                      $slideContainer.css('margin-left', 0);
                  }
                  $('h1').removeClass('sliderCaption');
              });
          }, pause);
      }
      function pauseSlider() {
          clearInterval(interval);
      }
  
      $slideContainer
          .on('mouseenter', pauseSlider)
          .on('mouseleave', startSlider);
  
      startSlider();
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#slider {
      width: 720px;
      height: 400px;
      overflow: hidden;
  }
  
  #slider .slides {
      display: block;
      width: 6000px;
      height: 400px;
      margin: 0;
      padding: 0;
  }
  
  #slider .slide {
      float: left;
      list-style-type: none;
      width: 720px;
      height: 400px;
      position: relative;
  }
  
  .sliderCaption{
   color: white;
   position: absolute;
   left: -150px;
   animation: mymove 5s ease;
  }
  
  @keyframes mymove {
      from {left: -150px;}
      to {left: 0px;}
  }
  
  /* helper css, since we don't have images */
  .slide1 {background: red;}
  .slide2 {background: blue;}
  .slide3 {background: green;}
  .slide4 {background: purple;}
  .slide5 {background: pink;}</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;div class="container"&gt;
   &lt;div class="header"&gt;
    &lt;h3 class="text-muted"&gt;jQuery Basic Slider&lt;/h3&gt;
   &lt;/div&gt;
  
   &lt;div id="slider"&gt;
    &lt;ul class="slides"&gt;
     &lt;li class="slide slide1"&gt;
      &lt;h1&gt;Some Text&lt;/h1&gt;
     &lt;/li&gt;
     &lt;li class="slide slide2"&gt;&lt;h1&gt;Some Text&lt;/h1&gt;&lt;/li&gt;
     &lt;li class="slide slide3"&gt;slide3&lt;/li&gt;
     &lt;li class="slide slide4"&gt;slide4&lt;/li&gt;
     &lt;li class="slide slide5"&gt;slide5&lt;/li&gt;
     &lt;li class="slide slide1"&gt;slide1&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>