Question

我在下面有以下代码，它是从（CSS-Tricks Link）修改的。它运行正常，但我网站中的魔术线（导航下的浮动元素）宽度为40像素。

我想永久居中对齐条形（无论它是否处于悬停状态），目前它在元素左侧对齐。因为它使用jQuery .position（）从左边开始计算，所以我的所有努力都添加了＆＃39; forceRight＆＃39;但否定jQuery .position（）。

变量＆＃39; forceRight＆＃39;，找到40px栏两侧的差异。但是我需要强制执行这个边间隙，因为菜单项的宽度不同。

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 - ＆gt;所需的轴值。

在这种情况下，我使用了不透明度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
        });

    });
});

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

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

这应该可以解决问题。

使用jQuery Position + Variable定居元素

2 个答案: