title: Jquery + css transition only works properly when console.log(...css("left")); is called
body: <p>I'm making a carousel using Jquery, Javascript, and using CSS to handle the transitions of each item, but the sliding direction only works correctly when <code>console.log($tipToAnimate.css("left:));</code> is added right after the conditional statement to assign the direction. I thought at first that this might be an issue of things firing too fast, so I added a timeout before adding the <code>.current</code> class (which controls when a slide should appear) but that yielded no change in behavior. I was using classes to handle all of this and moved to using Jquery to set the CSS, but that too has yielded the same behavior.</p>
  
  <p>Here's what I have:</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>var TIPS = TIPS || {};
  
  TIPS.animateTips = function(arrow) {
    var $arrow = $(arrow.target),
        direction = $arrow.data("direction"),
        $tip = $arrow.parent();
  
    animateTip($tip, direction);
  };
  
  function animateIn(self, direction) {
  
    if (direction == "left") {
      var $tipToAnimate = self.prev(); // find previous tip if going left
    } else if (direction == "right") {
      var $tipToAnimate = self.next(); // find next tip if going right
    }
  
    if ($tipToAnimate.length == 0) { // if there is no previous or next tip
      if (direction == "left") {
        $tipToAnimate = $(self).nextAll(".tip").last(); // find last tip if on first tip
      } else if (direction == "right") {
        $tipToAnimate = $(self).prevAll(".tip").last(); // find first tip if on last
      }
    }
  
    positionTip($tipToAnimate, direction); //this is the function that defines left
    revealTip($tipToAnimate, direction);
    $tipToAnimate.addClass("current");
  }
  
  function animateOut(self, direction) {
    self.addClass("exiting");
  
    if (direction == "left") {
      self.css("left", "-1400px");
    } else if (direction == "right") {
      self.css("left", "1300px");
    }
  
    self.removeClass("current");
  
    $(".exiting").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
      $(this).css("left", "");
      $(this).addClass("hidden").removeClass("exiting");
      $(this).off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
    });
  }
  
  function animateTip(self, direction) {
    animateOut(self, direction);
    animateIn(self, direction);
  }
  
  function loadCarousel() {
    $(".tip:not(.current)").addClass("hidden");
  }
  
  function positionTip(self, direction){
    if (direction == "left") {
      $(self).css("left", "1400px");
    } else if (direction == "right") {
      $(self).css("left", "-1400px");
    }
    console.log($(self).css("left")); // if this is removed, the carousel uses the css class "hidden" as the left value, even though it's being defined here
  }
  
  function revealTip(self, direction) {
    $(self).removeClass("hidden");
    $(self).css("left", "");
  }
  
  $(document).ready(function(){
    $(".arrow").bind("click", TIPS.animateTips);
  
    loadCarousel();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style-type: none;
  }
  
  .pages-resource_prototype .tip {
    background: #ffffff;
    bottom: 0;
    max-width: 550px;
    padding: 2em;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .pages-resource_prototype .tip.current {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  @media screen and (min-width: 48.75em) {
  
    .pages-resource_prototype .tip.current {
      left: 2.5em;
    }
  }
  
  .pages-resource_prototype .tip.hidden {
    left: -1400px;
  }
  
  .pages-resource_prototype .tip.exiting {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  
  .pages-resource_prototype .tip-content .subtitle {
    color: #5d57a2;
  }
  
  .pages-resource_prototype .tip-number {
    color: #999;
    font-size: 0.9em;
    margin-bottom: 1.5em;
  }
  
  .pages-resource_prototype .tips {
    background: #48C1C9;
  }
  
  .pages-resource_prototype .tips-list {
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: 90%;
  }
  @media screen and (min-width: 48.75em) {
  
    .pages-resource_prototype .tips-list {
      width: auto;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class= "pages-resource_prototype"&gt;
  &lt;section class='tips'&gt;
            &lt;ul class='tips-list'&gt;
              &lt;li class='tip tip-0 current'&gt;
                &lt;div class='tip-number'&gt;
                  1
                  of
                  4
                &lt;/div&gt;
                &lt;div class='left-arrow arrow' data-direction='left'&gt;
                  &lt;
                &lt;/div&gt;
                &lt;div class='right-arrow arrow' data-direction='right'&gt;
                  &gt;
                &lt;/div&gt;
                &lt;div class='tip-content'&gt;
                  &lt;h2&gt;
                    Tip Name
                  &lt;/h2&gt;
                  &lt;p class='subtitle'&gt;
                    Tip Type
                  &lt;/p&gt;
                  &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum
                  &lt;/p&gt;
                  &lt;a class="appreciate" href="#appreciate"&gt;&lt;i class='fa fa-heart'&gt;&lt;/i&gt;
                  &lt;div class='prompt'&gt;
                    Appreciate?
                  &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a class="download-tips" href="/"&gt;Download all tips&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class='tip tip-1 '&gt;
                &lt;div class='tip-number'&gt;
                  2
                  of
                  4
                &lt;/div&gt;
                &lt;div class='left-arrow arrow' data-direction='left'&gt;
                  &lt;
                &lt;/div&gt;
                &lt;div class='right-arrow arrow' data-direction='right'&gt;
                  &gt;
                &lt;/div&gt;
                &lt;div class='tip-content'&gt;
                  &lt;h2&gt;
                    Tip Name
                  &lt;/h2&gt;
                  &lt;p class='subtitle'&gt;
                    Tip Type
                  &lt;/p&gt;
                  &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum
                  &lt;/p&gt;
                  &lt;a class="appreciate" href="#appreciate"&gt;&lt;i class='fa fa-heart'&gt;&lt;/i&gt;
                  &lt;div class='prompt'&gt;
                    Appreciate?
                  &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a class="download-tips" href="/"&gt;Download all tips&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class='tip tip-2 '&gt;
                &lt;div class='tip-number'&gt;
                  3
                  of
                  4
                &lt;/div&gt;
                &lt;div class='left-arrow arrow' data-direction='left'&gt;
                  &lt;
                &lt;/div&gt;
                &lt;div class='right-arrow arrow' data-direction='right'&gt;
                  &gt;
                &lt;/div&gt;
                &lt;div class='tip-content'&gt;
                  &lt;h2&gt;
                    Tip Name
                  &lt;/h2&gt;
                  &lt;p class='subtitle'&gt;
                    Tip Type
                  &lt;/p&gt;
                  &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum
                  &lt;/p&gt;
                  &lt;a class="appreciate" href="#appreciate"&gt;&lt;i class='fa fa-heart'&gt;&lt;/i&gt;
                  &lt;div class='prompt'&gt;
                    Appreciate?
                  &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a class="download-tips" href="/"&gt;Download all tips&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class='tip tip-3 '&gt;
                &lt;div class='tip-number'&gt;
                  4
                  of
                  4
                &lt;/div&gt;
                &lt;div class='left-arrow arrow' data-direction='left'&gt;
                  &lt;
                &lt;/div&gt;
                &lt;div class='right-arrow arrow' data-direction='right'&gt;
                  &gt;
                &lt;/div&gt;
                &lt;div class='tip-content'&gt;
                  &lt;h2&gt;
                    Tip Name
                  &lt;/h2&gt;
                  &lt;p class='subtitle'&gt;
                    Tip Type
                  &lt;/p&gt;
                  &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                    est laborum
                  &lt;/p&gt;
                  &lt;a class="appreciate" href="#appreciate"&gt;&lt;i class='fa fa-heart'&gt;&lt;/i&gt;
                  &lt;div class='prompt'&gt;
                    Appreciate?
                  &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a class="download-tips" href="/"&gt;Download all tips&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/section&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>