Question

如果有人可以帮助我，那就太好了。到目前为止，我已经被卡住了！我必须承认我的JQuery技能不是最好的！

无论如何，我正在使用魔术线，而#navigation li使用JQuery启动.slide。

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

这是一个小提琴：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

您需要更新魔术线的origLeft数据属性。加上这个：

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

在IIFE结束时

您可以在任何地方修改和更改它，但基本逻辑是，只要点击a中的#navigation标记，您就需要获取标记的左侧位置并将其设置为魔法线的新origLeft。

Magic line响应JQuery

1 个答案: