根据用户单击的位置使页面向右或向左滑动

Question

问题的标题可能不是最具描述性的，但基本上我要做的是让页面在用户点击当前活动链接右侧的链接时向右滑动，或者滑动left 如果点击的链接在他们当前活动链接的左边。

例如，我有一个页面的这一部分：

<header>
    <nav>
        <ul>
            <li><a href="/page/about">About</a></li>
            <li><a href="/page/contact">Contact</a></li>
            <li><a href="/page/services" class="yourehere">Services</a></li>
            <li><a href="/page/other">Other</a></li>
        </ul>
    </nav>
</header>

<section id="content">
     Page content here
</section>

如果我单击标题元素中名为“yourehere”的元素右侧的链接，如果我单击“yourehere”类左侧的链接，我希望页面向右滑动或向左滑动'。

我有这个缩短的 JavaScript 代码，它通过 AJAX 加载内容，当它完成加载时，我让页面向右滑动：

$(function() {

var History = window.History;
if ( !History.enabled ) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    $.get(State.url, function(response) {

        var ajax_div = '#content';

        $(ajax_div).html(response).addClass('animated slideInRight');

    });

});


$('body').on('click', '.ajax', function(event) {
    $('header nav ul li a').not(this).removeClass('yourehere');
    $(this).parent().addClass('yourehere');

    event.preventDefault();
    History.pushState(null, $(this).text(), $(this).attr('href'));
});

});

这是用于使 div 向右滑动的两个类：

.animated {
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeInRight {
0% {
opacity: 1;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

如果有人有任何关于如何做我正在努力实现的事情的信息或技术，将不胜感激。 Krimper 网站是我正在努力实现的完美示例。 干杯:)

Answer 1

像这样？

$(document).ready(function(){
    $("a").click(function(){
        if($(this).offset().left>$(".yourehere").offset().left){
            alert("SLide right");
        }else{
            alert("SLide left");
        }

    });
});