Javascript 动画性能jQuery，css转换？我怎样才能在这里有更好的表现？

我想实现一种神奇的线条，当你在标题导航菜单上时，它会跟随你的鼠标

例如：

在这里，它工作得非常完美，非常平滑

我自己输入了一个jQuery脚本，它可以工作，但它并不像我想要的那样平滑

这是我的HTML：

<nav>
    <ul>
        <li>
            <a href="" class="active"><p>Accueil</p></a>
        </li>
        <li>
            <a href="" class=""><p>A propos</p></a>
        </li>
        <li>
            <a href="" class=""><p>Contact</p></a>
        </li>
        <li>
            <a href="" class=""><p>Nos technos</p></a>
        </li>
        <li id="magic-line"></li>
    </ul>
</nav>

这是我的剧本：

var barre = $("#magic-line");
$("a").hover(function(){
    var thisA = $(this);
    switch(thisA.children("p").html()) {
    case "Accueil":
        var aWidth = thisA.parent("li").width();
        var offset = thisA.offset().left;
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
        break;
    case "A propos":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
        break;
    case "Contact":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
    break;
    case "Nos technos":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
    break;
}
});

你知道如何优化这个脚本吗

下面是我脚本的一部分：

var barre = $("#magic-line");
$("a").hover(function(){
    var thisA = $(this);
    switch(thisA.children("p").html()) {
    case "Accueil":
        var aWidth = thisA.parent("li").width();
        var offset = thisA.offset().left;
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
        break;
    case "A propos":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
        break;
    case "Contact":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
    break;
    case "Nos technos":
        var offset = thisA.offset().left;
        var aWidth = thisA.parent("li").width();
        barre.css({left : offset, width : aWidth, transition : "0.5s"});
    break;
}
});

---

但是它比我的网站上的更平滑，我怎么解释呢？

你需要在li上触发悬停，在你的例子中，li被分成四个部分，这样它们从左到右填满整条线，中间没有空格，但得到的是a标签的大小

这一行在你的css中很重要吗

nav ul li {
   width: 25%
}

这是一种非常简短的函数编写方法：

$("li").each(function() {
  $(this).hover(function (){
    var trigger = $(this).find('a'),
        left        = trigger.offset().left,
        width       = trigger.outerWidth();
    barre.css({'left': left, 'width': width})
  })
})

我重写了你的小提琴：

---

您需要在li上触发悬停，在您的情况下，li被分成四个部分，以便它们从左到右填充整行，中间没有空格，但获得a标签的大小

这一行在你的css中很重要吗

nav ul li {
   width: 25%
}

这是一种非常简短的函数编写方法：

$("li").each(function() {
  $(this).hover(function (){
    var trigger = $(this).find('a'),
        left        = trigger.offset().left,
        width       = trigger.outerWidth();
    barre.css({'left': left, 'width': width})
  })
})

我重写了你的小提琴：

---

可能，此动画运行缓慢的原因在于代码库中的其他地方。但在这段代码中有一件事我要优化。 也就是说，每次用户悬停时，不需要干扰DOM来计算横杆的宽度和偏移量。最好只做一次，在布局发生变化时进行更新，并使用这些预先计算的值

例如：

var barre = $("#barre-du-futur"),
// cache more selectors for later use
    menuLink = $("a");

// This one will contain precalculated widths and offsets    
var barreProps;

$(document).ready(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Capture Barre properties
  captureBarreProps();
});

$(window).resize(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // RECapture Barre properties
  captureBarreProps();
});

// Optimization
function captureBarreProps() {
    // Reset the object
    barreProps = {};

  // Loop through the links to precalculate properties
  menuLink.each(function() {

        var curMenuLink = $(this);
    var curItemName = curMenuLink.children("p").html();
    if ( curItemName.toString() !== "" ) {
      barreProps[curItemName] = {
        width: curMenuLink.parent("li").width(),
        offset: curMenuLink.offset().left
      };    
    } else {
        // error: Something wrong with one of the Menu Items
    }

  });
}

// Now, there's no need in switch and hardcoding names
menuLink.hover(function(){
    var thisA = $(this),
      curItemName = thisA.children("p").html(),
      curBarreProps = barreProps[curItemName];

    barre.css({left : curBarreProps.offset, width : curBarreProps.width, transition : "0.5s"});
});

---

以下是

可能，此动画运行缓慢的原因在于代码库中的其他地方。但在这段代码中有一件事我要优化。 也就是说，每次用户悬停时，不需要干扰DOM来计算横杆的宽度和偏移量。最好只做一次，在布局发生变化时进行更新，并使用这些预先计算的值

例如：

var barre = $("#barre-du-futur"),
// cache more selectors for later use
    menuLink = $("a");

// This one will contain precalculated widths and offsets    
var barreProps;

$(document).ready(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Capture Barre properties
  captureBarreProps();
});

$(window).resize(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // RECapture Barre properties
  captureBarreProps();
});

// Optimization
function captureBarreProps() {
    // Reset the object
    barreProps = {};

  // Loop through the links to precalculate properties
  menuLink.each(function() {

        var curMenuLink = $(this);
    var curItemName = curMenuLink.children("p").html();
    if ( curItemName.toString() !== "" ) {
      barreProps[curItemName] = {
        width: curMenuLink.parent("li").width(),
        offset: curMenuLink.offset().left
      };    
    } else {
        // error: Something wrong with one of the Menu Items
    }

  });
}

// Now, there's no need in switch and hardcoding names
menuLink.hover(function(){
    var thisA = $(this),
      curItemName = thisA.children("p").html(),
      curBarreProps = barreProps[curItemName];

    barre.css({left : curBarreProps.offset, width : curBarreProps.width, transition : "0.5s"});
});

---

以下是提高动画性能的一种方法，即使用CSS变换。因此，我们将使用transform:translateX-scaleX，而不是更改左侧和宽度

缺点是旧浏览器不支持CSS转换，在某些情况下可能需要处理CSS前缀，例如-webkit transfer、-moz等，但CSS转换会触发硬件加速

我建议你试试这样的动画库，它会帮你解决所有这些问题。它将在可用时使用CSS转换，并在需要时添加所需的CSS前缀。当然，这会给你的项目增加一个额外的依赖项和几千字节

var项目=$‘li’； var bar=$'.bar'； 项。在“鼠标悬停”上，函数{ var项目=$this； var w=项目宽度； var x=item.position.left+15；//15是CSS的边距，请相应地更改此值 bar.css{ 转换：'translateX'+x+w/2-1+'px scaleX'+w+， //左:x,， //宽度：w }; } 身体{ 字体系列：无衬线； 利润率：20px 50px； } 导航{ 填充：15px 15px 20px 15px； 边框：1px实心ccc； 位置：相对位置； } 导航ul{ 列表样式：无； 保证金：0； 填充：0； } 李海军{ 列表样式：无； 显示：内联； 利润率：15px； } 李娜{ 文字装饰：无； 颜色：888； } 导航栏{ 位置：绝对位置； 宽度：1px； 高度：3倍； 左：0； 背景：0ae； 底部：16px； 过渡：0.5s全部； }

---

提高动画性能的一种方法是使用CSS变换。因此，我们将使用transform:translateX-scaleX，而不是更改左侧和宽度

缺点是旧浏览器不支持CSS转换，在某些情况下可能需要处理CSS前缀，例如-webkit transfer、-moz等，但CSS转换会触发硬件加速

我建议你试试这样的动画库，它会帮你解决所有这些问题。它将在可用时使用CSS转换，并在需要时添加所需的CSS前缀。当然，这会给你的项目增加一个额外的依赖项和几千字节

var项目=$‘li’； var bar=$'.bar'； 项。在“鼠标悬停”上，函数{ var项目=$this； var w=项目宽度； var x=item.position.left+15；//15是CSS的边距，请相应地更改此值 bar.css{ 转换：'translateX'+x+w/2-1+'px scaleX'+w+， //左:x,， //宽度：w }; } 身体{ 字体系列：无衬线； 利润率：20px 50px； } 导航{ 填充：15px 15px 20px 15px； 边框：1px实心ccc； 位置：相对位置； } 导航ul{ 列表样式：无； 保证金：0； 填充：0； } 李海军{ 列表样式：无； 显示：内联； 利润率：15px； } 李娜{ 文字装饰：无； 颜色：888； } 导航栏{ 位置：绝对位置； 宽度：1px； 高度：3倍； 左：0； 背景：0ae； 底部：16px； 过渡：0.5s全部； }

---

你能提供一个JSFIDLE吗？看起来非常流畅

---

我，那么你的网站上肯定还有其他问题。如果我们不能复制它，你将得不到答案，所以可能会显示你的网站..同意@ssc-hrep3，它对我来说也很平滑，也许你的网站中有其他东西使这个部分看起来很模糊。你能提供一个JSFIDLE吗？我觉得非常平滑，那么你的网站上一定有其他问题。如果我们无法复制它，你将无法得到答案，所以可能会显示你的网站..同意@ssc-hrep3，它在我看来也很平滑，也许你的网站中有其他东西使这部分看起来不稳定。