Блог

У меня есть следующий код ниже, он был изменен из (CSS-Tricks Link). Он работает нормально, однако ширина волшебной строки (плавающий элемент под навигацией) на моем сайте составляет 40 пикселей.

Я хочу постоянно выравнивать панель по центру (независимо от того, находится ли она в состоянии наведения или нет), в настоящее время она выровнена слева от элемента. Поскольку он использует jQuery .position() для вычисления слева, все мои усилия добавляют «forceRight», но отрицают jQuery .position() .

Переменная ‘forceRight’ находит разницу по обе стороны от строки размером 40 пикселей. Однако мне нужно, чтобы этот боковой зазор был принудительным, поскольку пункты меню имеют разную ширину.

 var forceRight,
    off_hover_left,
    $el,
    $calcuateForceDistance,
    $magicLine_width        = 40,
    $mainNav                = $("#main-navigation"),
    $currentPosition        = $(".current-menu-item"),
    $currentPosition_width  = ($currentPosition.outerWidth() - $magicLine_width);

$mainNav.append("<span id='magic-line'></span>");
var $magicLine = $("#magic-line");

$magicLine
    .css("left", $(".current-menu-item").position().left)
    .data("origLeft", $magicLine.position().left);

$("#main-navigation a").hover(function(){

    // current element
    $el                     = $(this),
    // Calcuate Distance 
    $calcuateForceDistance  = Math.floor( ( $el.outerWidth() - $magicLine_width ) / 2 );

    forceRight = ( $el.position().left   $calcuateForceDistance );


    off_hover_left = Math.floor( $currentPosition.position().left   ($currentPosition_width / 2) );

    $magicLine.stop().animate({
        left: forceRight
    });

}, function() {

    // On Hover Out - Return to DOM LOAD (.current-menu-item)
    $magicLine.stop().animate({

        // not selected outerwidth !!! sort out variables above!
        left: off_hover_left
    });

});
  

Большое спасибо!

Я исправил ошибку в своем коде, я также добавил документ, готовый для запуска кода при рендеринге в браузере. Когда код загружается, я также создал задержку, а затем добавил класс для устранения сбоя (левая анимация между 0 -> нужное значение оси.

В этом случае я использовал непрозрачность 0 по умолчанию. и 1, на .addClass(‘найдено’).

 var forceRight,
    $el,
    $calcuateForceDistance,
    $magicLine_width        = 40,
    $mainNav                = $("#main-navigation"),
    $currentPosition        = $(".current-menu-item"),
    $currentPosition_width  = ($currentPosition.outerWidth() - $magicLine_width),
    $off_hover_left         = Math.floor( $currentPosition.position().left   ($currentPosition_width / 2) );

    // Create HTML ELEMENT
    $mainNav.append("<span id='magic-line'></span>");
    // Target -> Variable
    var $magicLine = $("#magic-line");

    // Apply attr's
    $magicLine.css("left", $(".current-menu-item").position().left);


$(document).ready(function(){

    // Enforce Code On Load
    $magicLine.stop().animate({

        // not selected outerwidth !!! sort out variables above!
        left: $off_hover_left

    }).promise().done(function(){

        // Once Positioned - Then add class (changes opacity) !
        $(this).addClass('found');

    });

    $("#main-navigation a").hover(function(){

        // current element
        $el                     = $(this),
        // Calcuate Distance 
        $calcuateForceDistance  = Math.floor( ( $el.outerWidth() - $magicLine_width ) / 2 );

        forceRight = ( $el.position().left   $calcuateForceDistance );

        $magicLine.stop().animate({
            left: forceRight
        });

    }, function() {

        // On Hover Out - Return to DOM LOAD (.current-menu-item)
        $magicLine.stop().animate({

            // not selected outerwidth !!! sort out variables above!
            left: $off_hover_left
        });

    });
});
  

Я надеюсь, что это поможет кому-то, а не только мне!

В вашем javascript вы устанавливаете только левую позицию вашего #magic-line . Вам также необходимо установить ширину строки. Пример в коде внизу (только строки для изменения):

 // On the initialization
$magicLine
    .css({
        "left": $(".current-menu-item").position().left,
        "width" : $(".current-menu-item").outerWidth()
    });

// On modification
$magicLine.stop().animate({
    left: leftPos,
    width: $el.outerWidth()
});
  

Это должно решить проблему.