Javascript 完整页面jquery导航

大家好。我这里有个小问题

请检查此链接

我怎样才能使悬停的过渡更平滑，更像这样

我是一名设计师，对jquery只了解一点点，但我认为平滑度可以插入到这里

  .mouseleave(function() {
        if (!li.find(".fpn_wrap").hasClass("fpn_clicked")) { 
          $(this).removeClass("active")
          el.recalculate(settings, width);
          el.find(".fpn_wrap").finish().css({width: "100%"})
        }
     });

---

这是完整的代码

    !function($){

  var defaults = {
    columns: 5,
    selector: "> li",
    hover_size: "30%",
    animateDuration: 500,
    animateFrom: "left",
    clickable: true,
    afterClicked: null
    };

    $.fn.recalculate = function(settings, width) {
      var el = $(this),
          active = false,
          total = el.find(settings.selector).length,
          last_pos = 0,
          total_width = 0;

      if(el.find(".fpn_li.active").length > 0) {

        el.find(".fpn_li.active").css({
        width: settings.hover_size
      });  


      var small_width = (100 - parseFloat(settings.hover_size))/(settings.columns - 1)

      el.find(".fpn_li:not(.active)").css({
        width: small_width + "%"
      });


        el.find(settings.selector).each(function( index, value ) {
          if ($(this).prev(".fpn_li").length > 0) {
            if($(this).prev(".fpn_li").hasClass("active")) {
              var w = settings.hover_size
            } else {
              var w = small_width
            }
          var left = total_width + parseFloat(w)

          $(this).finish().animate({
            left: left + "%"
          }, settings.animateDuration, function() {
            $(this).css({
              left: left + "%"
            });
          })

            total_width = total_width + parseFloat(w)
        }
      });
    } else {
      el.find(settings.selector).each(function( index, value ) {
        $(this).finish().animate({
          width: width + "%",
          left: (width * index) + "%"
        }, settings.animateDuration);
      });
    }

    }

    function determineDirection($el, pos){
      var w = $el.width(),
          middle = $el.offset().left + w/2;        
      return (pos.pageX > middle ? 0 : 1);
  }

  $.fn.fullpagenav = function(options){
    var settings = $.extend({}, defaults, options),
        el = $(this),
        width = 100 / settings.columns;

    el.addClass("fullpagenav").find(settings.selector).addClass("fpn_li")
    el.parent().addClass("fpn_body")


    el.find(settings.selector).each(function( index, value ) {
      var li = $(this);


      li.css({
        width: width + "%",
        left: (width * index) + "%"
      });
      li.wrapInner("<div class='fpn_wrap'></div>")

      if (settings.clickable == true && li.data("link")) {
        li.css({cursor: "pointer"}).click(function(e) {
          if (!li.find(".fpn_wrap").hasClass("fpn_clicked")) {
            li.find(".fpn_wrap > img").css({
              margin: 0,
              padding: 0,
              left: 0,
              maxHeight: "inherit"
            }).animate({
              width: "100%"
              })


            li.find(".fpn_wrap").addClass("fpn_clicked").css({position: "fixed", "z-index": 99}).finish().animate({
              width: "100%", top: 0, left: 0
            }, settings.animationDuration, function() {
              e.preventDefault()
              if (typeof settings.afterClicked == 'function') return settings.afterClicked(li.data("link"));
              window.location.href = li.data("link");
            });
          } else {
            li.find(".fpn_wrap").removeClass("fpn_clicked").finish().animate({
              width: "0%", top: 0, left: 0, height: "0%"
            }, settings.animationDuration, function() {
              $(this).attr("style","").find("> img").attr("style","")
            })
          }
        });
      }

      li.mouseenter(function(e) {
        if (!li.find(".fpn_wrap").hasClass("fpn_clicked")) {
          $(this).finish().addClass("active")
          el.recalculate(settings, width);
          if (settings.animateFrom == "auto") {

            if(determineDirection(li, e) == 1) {
              $(this).find(".fpn_wrap").finish().css({ float: "left"}).animate({width: el.find(".fpn_li.active").width()}, settings.animateDuration)
            } else {
              $(this).find(".fpn_wrap").finish().css({ float: "right"}).animate({width: el.find(".fpn_li.active").width()}, settings.animateDuration)
            }
          } else {
            $(this).find(".fpn_wrap").finish().css({ float: settings.animateFrom}).animate({width: el.find(".fpn_li.active").width()}, settings.animateDuration)
          }
        }

      }).mouseleave(function() {
        if (!li.find(".fpn_wrap").hasClass("fpn_clicked")) { 
          $(this).removeClass("active")
          el.recalculate(settings, width);
          el.find(".fpn_wrap").finish().css({width: "100%"})
        }
      });
    });

  }
}(window.jQuery);

！函数（$）{
var默认值={
栏目：5，
选择器：“>li”，
悬停大小：“30%”，
动画教育：500，
animateFrom:“左”，
可点击：正确，
单击后：空
};
$.fn.recalculate=函数（设置、宽度）{
var el=$（此），
活动=错误，
总计=el.find（设置.选择器）.长度，
最后位置=0，
总宽度=0；
如果（el.find（“.fpn_li.active”）.length>0）{
el.find（“.fpn\u li.active”）.css({
宽度：设置。悬停\u大小
});  
var small_width=（100-parseFloat（settings.hover_size））/（settings.columns-1）
el.find（“.fpn_li:not（.active）”）.css({
宽度：小宽度+“%”
});
el.find（设置.选择器）.每个（函数（索引，值）{
如果（$（this）.prev（“.fpn_li”）.length>0）{
if（$（this）.prev（“.fpn_li”）.hasClass（“活动”））{
var w=设置。悬停大小
}否则{
var w=小宽度
}
var left=总宽度+浮动（w）
$（此）.finish（）.animate({
左：左+“%”
}，settings.animateduation，function（）{
$（this.css）({
左：左+“%”
});
})
总宽度=总宽度+浮动（w）
}
});
}否则{
el.find（设置.选择器）.每个（函数（索引，值）{
$（此）.finish（）.animate({
宽度：宽度+“%”，
左：（宽度*索引）+“%”
}，设置。动画教育）；
});
}
}
函数确定方向（$el，pos）{
var w=$el.width（），
中间=$el.offset（）.left+w/2；
返回（位置pageX>中间？0:1）；
}
$.fn.fullpagenav=函数（选项）{
变量设置=$.extend（{}，默认值，选项），
el=$（本），
宽度=100/列；
el.addClass（“fullpagenav”）.find（settings.selector）.addClass（“fpn_li”）
el.parent（）.addClass（“fpn_body”）
el.find（设置.选择器）.每个（函数（索引，值）{
var li=$（本）；
li.css({
宽度：宽度+“%”，
左：（宽度*索引）+“%”
});
li.wrapInner（“”）
如果（settings.clickable==true&&li.data（“链接”））{
css（{cursor:“pointer”}）。单击（函数（e）{
if（！li.find（“.fpn\u wrap”）.hasClass（“fpn\u单击”））{
li.find（“.fpn\u wrap>img”）.css({
保证金：0，
填充：0，
左:0,，
maxHeight：“继承”
}).制作动画({
宽度：“100%”
})
li.find（“.fpn_wrap”）.addClass（“fpn_clicked”）.css（{position:“fixed”，“z-index”：99}）.finish（）.animate({
宽度：“100%”，顶部：0，左侧：0
}，settings.animationDuration，function（）{
e、 预防默认值（）
if（typeof settings.afterClicked==“function”）返回settings.afterClicked（li.data（“link”）；
window.location.href=li.data（“链接”）；
});
}否则{
li.find（“.fpn\u wrap”）.removeClass（“fpn\u单击”）.finish（）.animate({
宽度：“0%”，顶部：0，左侧：0，高度：“0%”
}，settings.animationDuration，function（）{
$（this.attr（“style”和“”）.find（“>img”）.attr（“style”和“”）
})
}
});
}
李.鼠标指针（功能（e）{
if（！li.find（“.fpn\u wrap”）.hasClass（“fpn\u单击”））{
$（this.finish（）.addClass（“活动”）
el.重新计算（设置、宽度）；
如果（settings.animateFrom==“自动”）{
if（确定方向（li，e）==1）{
$（this.find（“.fpn_wrap”）.finish（）.css（{float:“left”}）.animate（{width:el.find（.fpn_li.active”）.width（）}，settings.animateDuration）
}否则{
$（this.find（“.fpn_wrap”）.finish（）.css（{float:“right”}）.animate（{width:el.find（.fpn_li.active”）.width（）}，settings.animateDuration）
}
}否则{
$（this.find（“.fpn_wrap”）.finish（）.css（{float:settings.animateFrom}）.animate（{width:el.find（.fpn_li.active”）.width（）}，settings.animateDuration）
}
}
}).mouseleave（函数（）{
如果（！li.find（“.fpn_wrap”）.hasClass（“.fpn_clicked”）{
$（此）.removeClass（“活动”）
el.重新计算（设置、宽度）；
el.find（“.fpn_wrap”）.finish（）.css（{宽度：“100%”）
}
});
});
}
}（window.jQuery）；

---

谢谢：）

Alice，与JS相比，css更容易使用。你需要一个像引导一样的响应网格，悬停时你可以扩展宽度，这样可以减少痛苦和完全平滑。你好，saj…你能给我指一些参考资料或图坦卡蒙吗？（目前正在搜索）…我实际上考虑过使用css3，但不确定我是否能达到这个网站上的效果greensock也有一个很好的优化库。自从我切换到js之后，我没有太多地使用它，但是基准测试令人印象深刻，我将对此进行研究。谢谢：）