本文由 资源共享网 – admin 发布，转载请注明出处，如有问题请联系我们！jQuery CSS3导航菜单下划线动画特效

一款简单漂亮的jQuery CSS3导航菜单下划线动画特效，鼠标点击导航菜单文字链接时，下划线线性流动动画效果。

js代码

<script>
var nav = $("nav");
var line = $("<div />").addClass("line");

line.appendTo(nav);

var active = nav.find(".active");
var pos = 0;
var wid = 0;

if(active.length) {
  pos = active.position().left;
  wid = active.width();
  line.css({
    left: pos,
    width: wid
  });
}

nav.find("ul li a").click(function(e) {
  if(!$(this).parent().hasClass("active")) {
    e.preventDefault();

    var _this = $(this);

    nav.find("ul li").removeClass("active");

    var position = _this.parent().position();
    var width = _this.parent().width();

    if(position.left >= pos) {
      line.animate({
        width: ((position.left - pos) + width)
      }, 300, function() {
        line.animate({
          width: width,
          left: position.left
        }, 150);
        _this.parent().addClass("active");
      });
    } else {
      line.animate({
        left: position.left,
        width: ((pos - position.left) + wid)
      }, 300, function() {
        line.animate({
          width: width
        }, 150);
        _this.parent().addClass("active");
      });
    }

    pos = position.left;
    wid = width;
  }
});
</script>