javascript - 魔线响应JQuery

Question

如果有人能帮助我解决这个问题，那就太好了。到目前为止我已经做到了，但现在我被困住了!我必须承认我的 JQuery 技能还达不到标准!

无论如何，我使用的是魔法线，并且 #navigation li 使用 JQuery 启动 .slide。

当单击#navigation li 时，我希望魔线停留在已选择的li 下方，直到用户单击另一个li。

这是一个 fiddle :http://jsfiddle.net/danieljoseph/7Yxn2/2/

感谢您对此的帮助。如果您有时间，请解释一下，因为我正在尝试开发 JQuery。

感谢您的宝贵时间。

JQuery:

// Magic Line
$(function() {

var $el, leftPos, newWidth;
    $mainNav2 = $("#navigation");

$("#navigation").append("<li id='magic-line'></li>");

var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#navigation li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
   console.log($el.parent());
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

});


// Services Animations
    $('#ecommerce').click(function(){
    $(".slide2, .slide3, .slide4, .slide5").fadeOut(1000);
    $('.slide1').fadeIn(1000);
    $('.slide .left').addClass('slideUp');
});

    $('#responsive').click(function(){
    $(".slide1, .slide3, .slide4, .slide5").fadeOut(1000);
    $('.slide2').fadeIn(1000);
    $('.slide .left').addClass('slideUp');
});

    $('#logodesign').click(function(){
    $(".slide1, .slide2, .slide4, .slide5").fadeOut(1000);
    $('.slide3').fadeIn(1000);
    $('.slide .left').addClass('slideUp');
});

    $('#branding').click(function(){
    $(".slide1, .slide2, .slide3, .slide5").fadeOut(1000);
    $('.slide4').fadeIn(1000);
    $('.slide .left').addClass('slideUp');
});

    $('#literature').click(function(){
    $(".slide1, .slide2, .slide3, .slide4").fadeOut(1000);
    $('.slide5').fadeIn(1000);
    $('.slide .left').addClass('slideUp');
});

Answer 1

您需要更新 magic line 的 origLeft 数据属性。添加此:

$("#navigation a").click(function() {
   $magicLine.data("origLeft", $(this).position().left); 
});

在 IIFE 结束时

您可以在任何地方对其进行修改和更改，但基本逻辑是，每当单击 #navigation 中的 a 标记时，您都需要获取标签的左侧位置并将其设置为魔术线的新 origLeft。