アニメーションのパフォーマンスjQuery、CSSの切り替え？どのように私はここでより良いパフォーマンスを得ることができますか？

Question

ヘッダーのナビゲーションメニューを開いているときにマウスの次にある種類のマジックラインを実装したいと思います。例えば

：

http://www.infinitesquare.com/#actualites

ここで、それは非常に滑らかで、完璧に動作します。

私は自分で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> 

は、特定のCSSです：ここでは

#magic-line{ 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 3px; 
    background-color: #7190C9; 
    left: 0px; 
    top:97px; 
} 

は私のスクリプトです：

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; 
} 
}); 

は、あなたは私が最適化する方法任意のアイデアを持っていますかこのスクリプト？

https://jsfiddle.net/3jeu2L7v/

しかし、それは私のウェブサイト上よりも滑らかだし、どのように私はそう説明することができます：ここで

は私のスクリプトのJsFiddleのですか？

Answer 1

一つの方法は、CSS変換を使用しているのです。したがって、leftとwidthを変更する代わりに、transform: translateX() scaleX()を使用します。

欠点は、旧式のブラウザではCSS変換がサポートされていないことがあるため、CSS接頭辞を処理する必要がある場合があります（-webkit-transfor、-mozなど）。

あなたのためにこのすべてを世話するGSAPのようなアニメーションライブラリを試してみることをお勧めします。利用可能な場合はCSS変換を使用し、必要に応じて必要なCSSプレフィックスを追加します。もちろん、これはあなたのプロジェクトと数キロバイトに余分な依存関係が追加されます。）

var items = $('li'); 
 
var bar = $('.bar'); 
 

 
items.on('mouseover', function(){ 
 
    var item = $(this); 
 
    var w = item.width(); 
 
    var x = item.position().left + 15; // 15 is the margin form the CSS, change this accordingly 
 

 
    bar.css({ 
 
    transform: 'translateX(' + (x + w/2 - 1) + 'px) scaleX(' + w + ')', 
 
    //left: x, 
 
    //width: w 
 
    }); 
 
})

body { 
 
    font-family: sans-serif; 
 
    margin: 20px 50px; 
 
} 
 

 
nav{ 
 
    padding: 15px 15px 20px 15px; 
 
    border: 1px solid #ccc; 
 
    position: relative; 
 
} 
 

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

 
nav li { 
 
    list-style: none; 
 
    display: inline; 
 
    margin: 15px; 
 
} 
 

 
nav li a { 
 
    text-decoration: none; 
 
    color: #888; 
 
} 
 

 
nav .bar { 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 3px; 
 
    left: 0; 
 
    background: #0ae; 
 
    bottom: 16px; 
 
    transition: 0.5s all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About us</a></li> 
 
    <li><a href="#">Work</a></li> 
 
    <li><a href="#">Contact us</a></li> 
 
    </ul> 
 
    <div class="bar"></div> 
 
</nav>

をここで作業例です：http://codepen.io/victmo/pen/KMMNVG

変更を取得する場合、これをチェックCSS変換を使用したアニメーションのパフォーマンスに関するビデオ/記事。それは古くても有効です。http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

幸運を祈る！

Answer 2

あなたのケースでは4つに分割されたliにホバーをトリガーする必要があります。これにより、ライン間にスペースを置かずに行全体を塗りつぶしますが、aタグのサイズを取得します。

Impotrantがあなたの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}) 
    }) 
}) 

： Your rewritten fiddle

Answer 3

おそらく、このアニメーションがゆっくりと実行される理由は、コードベースのどこかにあります。しかし、私はこのコードで最適化することが1つあります。 つまり、ユーザーが移動するたびに「Barre」の幅とオフセットを計算するために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"}); 
}); 

は、ここでは、アニメーションのパフォーマンスを向上させるためにfiddle