title: jQuery Animate Not Working (Position has been set)
body: <p>this has been driving me nuts. Putting a slider together and the image will slideDown, but when I change to animate, it stops working.</p>
  
  <p>Position has been set to relative. Any ideas?</p>
  
  <pre><code> function carousel() {
      var x = document.getElementsByClassName("pf-grid-items");
      var t = document.getElementsByClassName("rotateText");
      var image = document.getElementsByClassName("img1");
      for (var i = 0; i &lt; x.length; i++) {
        x[i].style.display = "none";
      }
      for (var j = 0; j &lt; t.length; j++) {
        t[j].style.display = "none";
      }
      for (var d = 0; d &lt; image.length; d++) {
        image[d].style.display = "none";
      }
  
      slideIndex++;
  
      if (slideIndex &gt; x.length) {slideIndex = 1}
      var output = x[slideIndex-1]
      var imageSlide = image[slideIndex-1]
      if (slideIndex % 2 !==0){
  
      $(output).slideDown(1000).promise().done(function(){
  
        textCarousel(t)
        $(imageSlide).animate({left:"250px"});
          $(output).fadeOut(5000);
      })
    } else {
      $(output).fadeIn(1000).promise().done(function(){
  
        textCarousel(t)
          $(output).fadeOut(5000);
      })
    }
    setTimeout(carousel, 7000);
  }
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>.img1 {
    position: relative;
    width: 50%;
    height: 100%;
    background: url('./flex/angular.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  </code></pre>