Ползунок, бегающий за мышкой в меню js

by avgustre

HTML

<script>
  $(document).ready(function() {
    var style = 'easeOutExpo';
    var default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left);
    var default_top = $('.menu ul li.active').height() + 30; /* 30 - отступ от пункта меню */
    var default_width = $('.menu ul li.active').outerWidth();
    $('#border').css({
      left: default_left,
      top: default_top,
      width: default_width
    });
    $('.menu ul li').hover(function() {
      left = Math.round($(this).offset().left - $('.menu ul').offset().left);
      width = $(this).outerWidth();
      $('#border').stop(false, true).animate({
        left: left,
        width: width
      }, {
        duration: 500,
        easing: style
      });
    }).click(function() {
      $('.menu ul li').removeClass('active');
      $(this).addClass('active');
    });
    $('.menu ul').mouseleave(function() {
      default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left);
      default_width = $('.menu ul li.active').outerWidth();
      $('#border').stop(false, true).animate({
        left: default_left,
        width: default_width
      }, {
        duration: 1500,
        easing: style
      });
    });
  });

</script>

<body>
  <div class="menu">
    <ul>
      <li class="active">Первый пункт меню</li>
      <li>Второй</li>
      <li>Третий</li>
      <li>Четвертый самый длинный пункт меню</li>
    </ul>
  </div>
  <div id="border"></div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  float: left;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}

.menu ul li.active {
  background-color: green;
}

.menu ul li:hover {
  background-color: yellow;
}

#border {
  height: 3px;
  background-color: red;
  position: absolute;
}

JavaScript

jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
  def: 'easeOutQuad',
  swing: function(x, t, b, c, d) {
    return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
  },
  easeInQuad: function(x, t, b, c, d) {
    return c * (t /= d) * t + b;
  },
  easeOutQuad: function(x, t, b, c, d) {
    return -c * (t /= d) * (t - 2) + b;
  },
  easeInOutQuad: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  },
  easeInCubic: function(x, t, b, c, d) {
    return c * (t /= d) * t * t + b;
  },
  easeOutCubic: function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  },
  easeInOutCubic: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
    return c / 2 * ((t -= 2) * t * t + 2) + b;
  },
  easeInQuart: function(x, t, b, c, d) {
    return c * (t /= d) * t * t * t + b;
  },
  easeOutQuart: function(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
  },
  easeInOutQuart: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
  },
  easeInQuint: function(x, t, b, c, d) {
    return c * (t /= d) * t * t * t * t + b;
  },
  easeOutQuint: function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  },
  easeInOutQuint: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
  },
  easeInSine: function(x, t, b, c, d) {
    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
  },
  easeOutSine: function(x, t, b, c, d) {
    return c * Math.sin(t / d * (Math.PI / 2)) + b;
  },
  easeInOutSine: function(x, t, b, c, d) {
    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
  },
  easeInExpo: function(x, t, b, c, d) {
    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
  },
  easeOutExpo:...