title: Animate css depending on mouse movement [how can I improve]
body: <h2>Hello</h2>
  
  <p>So I started to write some function witch will do this(closer you move mouse to div the closer div moves to mouse position <code>on parent X axsis</code>, maximum div position is <code>left:-40%</code> and minimum is <code>left: -80%</code>):</p>
  
  <p><strong>Note:</strong> The black arrow is cursor(mouse position)</p>
  
  <ol>
  <li><img src="https://i.stack.imgur.com/2Xz75.png" alt="List item"></li>
  <li><img src="https://i.stack.imgur.com/2fJ9P.png" alt="List item"></li>
  <li><img src="https://i.stack.imgur.com/7eBiv.png" alt="List item"></li>
  </ol>
  
  <h2>Code</h2>
  
  <p><strong>HTML</strong> markup:</p>
  
  <pre><code>&lt;div class="wraper"&gt;
      &lt;div class="ls"&gt;
          &lt;div class="ldiv"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="c"&gt;
          &lt;div class="coordinates"&gt;
          &lt;/div&gt;
          &lt;div class="cdiv"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rs"&gt;
          &lt;div class="rdiv"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> markup:</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
  }
  .wraper{
      width: 100%;
      height: 500px;
  }
  .ls, .rs{
      position: relative;
      float: left;
      width: 30%;
      height: 100%;
      background-color: #eeeeee;
  }
  .c{
      position: relative;
      float: left;
      width: 40%;
      height: 100%;
      background-color: #dddddd;
  }
  .cdiv{
      position: absolute;
      top: 25%;
      left: 10%;
      width: 80%;
      height: 50%;
      background-color: red;
  }
  
  .ldiv{
      position: absolute;
      top: 30%;
      left: -80%;
      width: 80%;
      height: 40%;
      background-color: red;
  }
  .rdiv{
      position: absolute;
      top: 30%;
      right: -40%;
      width: 80%;
      height: 40%;
      background-color: red;
  }
  </code></pre>
  
  <p><strong>Javacsript</strong> markup:</p>
  
  <pre><code>//ASsign global variables
  var mouseX = 0;
  var newTop = 0;
  
  $("div.ls").mousemove(function(event) {
      // Get parrent offset
      var parentOffset = $(this).offset();
      // Get child division offset
      var division = $(".ldiv").offset();
      // Calculate mouse position inside left division
      var relX = event.pageX - parentOffset.left;
      var relY = event.pageY - parentOffset.top;
      // Check if mouse changed its position
      if (mouseX != relX){
          // Get new position of x axis
          var newPosX = $(this).width() - relX - 161;
          // Get new height of child element in percentage
          var newHeight = 100 * parseFloat($(".ldiv").height()) / parseFloat($(this).height());
          // Display important stuff
          $(".coordinates").text("Mouse position = X:" + relX + " Y:" + relY + "Div offset = X:" + division.left + " Y:" + division.top  + " Width = " + $(this).width()+" newHJeight = "+newHeight);
          //If mouse moves left
          if (mouseX &gt; relX) {
              // Cant go lower then 0.2 because javascript is rounding it down
              newHeight += 0.2;
              // calculate new top so division stays in middle of parent
              newTop = (100 - newHeight) / 2;
              // Assign new css
              $(".ldiv").css({
                  left: newPosX + "px",
                  height: newHeight + "%",
                  top: newTop + "%"
              });
          } 
          //If mouse moves right
          else {
              newHeight -= 0.2;
              newTop = (100 - newHeight) / 2;
              $(".ldiv").css({
                  left: newPosX + "px",
                  height: newHeight + "%",
                  top: newTop + "%"
              });
          }
          // Record mouse position
          mouseX = relX;
      }
  });
  </code></pre>
  
  <p>​</p>
  
  <h2>Here is live example in <a href="http://jsfiddle.net/rkWDR/221/" rel="nofollow noreferrer">jsFiddle</a></h2>
  
  <p><strong>Things I want to get done</strong>:</p>
  
  <ol>
  <li>How can I rewrite this code so it would work more like animation, and wouldn't go out of order if I would move mouse to fast?</li>
  </ol>
  
  <p>​</p>