javascript - 根据用户点击的位置让页面向右或向左滑动

Question

问题的标题可能不是最具描述性的，但基本上我想做的是让页面在用户单击当前事件链接右侧的链接时向右滑动，或者滑动如果单击的链接位于其当前事件链接的左侧，则在左侧。

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

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

    });
});