Offset von <a>-Tag, ist von wenigen Pixeln

Ich wollte erstellen Sie eine einfache punktierte Unterstrichen Animation für eine Menüleiste von mir, also schrieb ich den folgenden HTML-off:Offset von <a>-Tag, ist von wenigen Pixeln

<nav role="navigation" class="navigation"> 

    <ul class="nav-listed-links"> 
    <li class="active"><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Our Potfolio</a></li> 
    <li><a href="">History</a></li> 
    <li><a href="">Contact US</a></li> 
    <li class="underline"></li> 
    </ul> 

</nav>

und die folgenden JS-Code zu machen die Unterstreichung.

JS:

$('.nav-listed-links > li > a').hover(function() { 

    var offset = ($(this).offset().left - 0), 
    width = $(this).outerWidth(); 

    $('.underline').addClass('on'); 

    $('.underline').css({ 
    left: offset, 
    width: width 
    }); 

}, function() { 

    $('.underline').removeClass('on'); 


});

Die glatte Animation ist CSS-Übergänge, FIDDLE HERE.

Ok, so kann jetzt Null nach unten auf dem Problem, in dem Code JS ich bin versuchen, weit zu kommen, wie aus den <a> von der linken Seite des Dokuments ist und so habe ich den folgenden Code:

var offset = ($(this).offset().left - 0)

doch der Unterstreichungs ist ein bisschen weg von wo der Start des <a> Tages wird, siehe Bild unten:

, warum dies geschieht. Ich bin mir sicher, dass das etwas albern ist, aber ich habe es wirklich nicht für das Leben in mir herausgefunden.

Quelle

2016-06-27 Alexander Solonik

@pmahomme mehr daran interessiert, in der 'WHY' Teil eher dann die Lösung :) TY obwohl –

ich sehe, dass es @Rohit dachte vor ein paar Minuten ... es ist der Rand der Body default bei 8px: https://jsfiddle.net/seLLz177/. Wenn auf 0 gesetzt, ist es in Ordnung.Die Verwendung von Chrome "Inspect Element" oder Firefox hat etwas ähnliches ist eine sehr hilfreiche Möglichkeit, Dinge wie diese herauszufinden. – deebs

Mit offset() Sie

ruft die aktuelle Position in Bezug auf das Dokument

daher mit dem Standard-margin von die body haben Sie diese zusätzliche Lücke.

schlage ich die Verwendung von position() Probleme zu vermeiden, da die Unterstreichungs zum ul Behälters relativ ist:

Abrufen der aktuellen Position eines Elements relativ zu dem Offsetmutter

var offset = $(this).position().left,

Updated Fiddle

_{Reference Position()}

Quelle

2016-06-27 20:31:02 DaniP

Dies ist nur wegen der margin, die body in der Geige haben. Einstellung margin: 0 funktioniert perfekt. Solche margin können Sie auch auf den äußeren Elementen haben. Sie müssen diese Ränder auch nehmen.

Hier wird ein aktualisierter JSFiddle mit margin-left: 0px; auf dem Körperelement: https://jsfiddle.net/w8unr0od/2/

Quelle

2016-06-27 20:22:42

Offset von <a>-Tag, ist von wenigen Pixeln

Antwort

Verwandte Themen