使用 jQuery 位置 + 变量居中元素

Question

我有下面的代码，它是从 (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
    });

});

非常感谢！

Answer 1

我已经修复了我的代码中的错误，我还添加了一个文档准备让代码在浏览器渲染上运行。代码加载时，我还创建了一个延迟，然后添加了一个类来消除故障（0 -> 所需轴值之间的左侧动画。

在这种情况下，我使用不透明度 0 作为默认值。和 1，在 .addClass('found') 上。

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

    });
});

我希望这会有所帮助，不仅仅是我！

Answer 2

在您的 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()
});

这应该可以解决问题。