jQuery的 - 航點 - 動畫導航

Question

這裏是我的想法：

• 列表項後面
  
• 列表項

滾動的導航滾動到上點擊一個<div>黑色邊框

這很難解釋（我是法國人）所以試試吧： http://mathieualbore.com/traci/

它，當你從smilio單擊工作> skiply但不工作，如果從skiply開始，然後單擊> smilio

代碼：

$("#smilio").waypoint({ 
    handler: function(event, direction) { 
    left = $('.menu li[data-target="#smilio"]').position().left; 
    w = $('.menu li[data-target="#smilio"] span').width(); 
    $('.active').stop().animate({ left: left, width: w+40 })  
}, 
offset: 40 
}); 

$("#skiply").waypoint({ 
    handler: 
    function(event, direction) { 
    left = $('.menu li[data-target="#skiply"]').position().left; 
    w = $('.menu li[data-target="#skiply"] span').width(); 
    $('.active').stop().animate({ left: left, width: w+40 }) 
}, 
offset: 40 
}); 

和

$(".menu li").click(function() { 
var target = $(this).data("target"); 
var scrollY = $(target).position().top; 
$("html, body").animate({ scrollTop: scrollY-40 }, 500); 
} 

Answer 1

我找到了如果有人對此感興趣，可以使用這種方法

$(".menu li, a").click(function() { 
var target = $(this).data("target"); 
var scrollY = $(target).position().top; 
$("html, body").animate({ 

scrollTop: scrollY-40 

}, 500, function() { 

left = $('.menu li[data-target="'+target+'"]').position().left; 
w = $('.menu li[data-target="'+target+'"]').width();  
$('.active').stop().animate({ 
    left: left, 
    width: w+40 
}) 

}); 
}); 

Answer 2

而這個簡化航點：

$(".menu li").each(function() { 
var target = $(this).data("target"); 

$(target).waypoint({ 
    handler: function(event, direction) { 
    left = $('.menu li[data-target="'+target+'"]').position().left; 
    w = $('.menu li[data-target="'+target+'"]').width(); 
    $('.active').stop().animate({ left: left, width: w+40 }) 
    }, 

    offset: 40 

    }); 

    });