title: Why does jquery addClass and removeClass work properly only with alert function?
body: <p>I am trying to make my own slider with jquery. Following is the working example:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
  
    $(".carousel-indicators li").click(function(){
     $(".carousel-indicators li").css("background-color", "transparent");
     $(this).css("background-color", "yellow");
    });
  
  
    var active1, prev1, next1;
    
    function rotateimages(){
     active1 = $(".item.active");
  
     if(active1.prev().length == 0) {
      prev1 = $(".item").last();
      prev1.removeClass("mytrans");
      prev1.addClass("prev");    
     }
     else {
      prev1 = active1.prev();
      prev1.removeClass("mytrans");
      prev1.addClass("prev");    
     }
  
     if(active1.next().length == 0) {
      next1 = $(".item").first();
      next1.removeClass("mytrans");
      next1.addClass("next");  
      //alert();      
     }
     else {
      next1 = active1.next();
      next1.removeClass("mytrans");
      next1.addClass("next"); 
      //alert();
     }
     
  
     active1.removeClass("active").addClass("prev mytrans");
     next1.removeClass("next").addClass("mytrans active");   
     prev1.removeClass("prev mytrans");
  
    }
  
    setInterval(rotateimages, 3000);
  
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner &gt; .item &gt; img,
    .carousel-inner &gt; .item &gt; a &gt; img {
        width: 70%;
        margin: auto;
    }
    html, body {
     width: 100%;
     height: 100%;
    }
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
   }
   .container {
    width: 768px;
    margin: auto;
    padding: 0 15px;
    height: 100%;
   }
   #myCarousel {
    width: 100%;
    background-color: lightgray;
    position: relative;
    height: 100%;
   }
   .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 45%;
   }
   .carousel-indicators li {
    list-style-type: circle;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 10px;
    cursor: pointer;
   }
  
   .mytrans {
    transition: all 1s;
   }
   .carousel-inner .item {
    position: absolute;
    display: none;
   }
   .carousel-inner .item.prev {
    left: -100%;
    top: 0;
    display: block;
   }
   .carousel-inner .item.next {
    left: 100%;
    top: 0;
    display: block;
   }
   .carousel-inner .item.active {
    left: 0%;
    top: 0;
    display: block;
   }
   .carousel-inner .left {
    position: absolute;
    left: 10%;
    top: 50%;
   }
   .carousel-inner .right {
    position: absolute;
    right: 10%;
    top: 50%;
   }</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 id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
  
        &lt;div class="item active"&gt;
          &lt;img src="http://madaboutwords.com/wp-content/uploads/2010/05/one.png" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        
      
        &lt;div class="item"&gt;
          &lt;img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://www.hotel-r.net/im/hotel/gb/number-three-22.png" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://www.hotel-r.net/im/hotel/gb/number-four-10.gif" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I designed the code to put the <code>next</code> image to the right of the container and then move it smoothly to reach the center. But the <code>next</code> image never reaches <code>left: 100%</code>. However if I add an <code>alert()</code> after the jquery addClass method the <code>next</code> image reaches the right of the container. Following is the code:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
  
    $(".carousel-indicators li").click(function() {
      $(".carousel-indicators li").css("background-color", "transparent");
      $(this).css("background-color", "yellow");
    });
  
  
    var active1, prev1, next1;
  
    function rotateimages() {
      active1 = $(".item.active");
  
      if (active1.prev().length == 0) {
        prev1 = $(".item").last();
        prev1.removeClass("mytrans");
        prev1.addClass("prev");
      } else {
        prev1 = active1.prev();
        prev1.removeClass("mytrans");
        prev1.addClass("prev");
      }
  
      if (active1.next().length == 0) {
        next1 = $(".item").first();
        next1.removeClass("mytrans");
        next1.addClass("next");
        alert();
      } else {
        next1 = active1.next();
        next1.removeClass("mytrans");
        next1.addClass("next");
        alert();
      }
  
  
      active1.removeClass("active").addClass("prev mytrans");
  
  
      next1.removeClass("next").addClass("mytransactive");
  
  
      prev1.removeClass("prev mytrans");
  
    }
  
    setInterval(rotateimages, 3000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner &gt; .item &gt; img,
  .carousel-inner &gt; .item &gt; a &gt; img {
    width: 70%;
    margin: auto;
  }
  html,
  body {
    width: 100%;
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
  }
  .container {
    width: 768px;
    margin: auto;
    padding: 0 15px;
    height: 100%;
  }
  #myCarousel {
    width: 100%;
    background-color: lightgray;
    position: relative;
    height: 100%;
  }
  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 45%;
  }
  .carousel-indicators li {
    list-style-type: circle;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 10px;
    cursor: pointer;
  }
  .mytrans {
    transition: all 1s;
  }
  .carousel-inner .item {
    position: absolute;
    display: none;
  }
  .carousel-inner .item.prev {
    left: -100%;
    top: 0;
    display: block;
  }
  .carousel-inner .item.next {
    left: 100%;
    top: 0;
    display: block;
  }
  .carousel-inner .item.active {
    left: 0%;
    top: 0;
    display: block;
  }
  .carousel-inner .left {
    position: absolute;
    left: 10%;
    top: 50%;
  }
  .carousel-inner .right {
    position: absolute;
    right: 10%;
    top: 50%;
  }</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 id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
  
        &lt;div class="item active"&gt;
          &lt;img src="http://madaboutwords.com/wp-content/uploads/2010/05/one.png" alt="Chania" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Chania&lt;/h3&gt;
            &lt;p&gt;The atmosphere in Chania has a touch of Florence and Venice.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
        &lt;div class="item"&gt;
          &lt;img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://www.hotel-r.net/im/hotel/gb/number-three-22.png" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://www.hotel-r.net/im/hotel/gb/number-four-10.gif" alt="Flower" width="460" height="345"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;Flowers&lt;/h3&gt;
            &lt;p&gt;Beatiful flowers in Kolymbari, Crete.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem seems to be that the class <code>next</code> is being added and removed too fast. So it may be possible that the before the styles of <code>next</code> are added the class <code>next</code> is removed. The code snippet is: </p>
  
  <pre><code>else {
      next1 = active1.next();
      next1.removeClass("mytrans");
      next1.addClass("next"); 
      //alert();
  }
  
  
  active1.removeClass("active").addClass("prev mytrans");
  next1.removeClass("next").addClass("mytrans active");           
  prev1.removeClass("prev mytrans");
  </code></pre>
  
  <p><strong>Question:</strong> How do I apply the styles of <code>next</code> class before the <code>next</code> class is removed by the removeClass function?</p>