使用jQuery向左滚动动画

Question

这是我单击按钮并滚动浏览并更改一些内容的当前代码。

$(".scroll").click(function(event) {
    $('.panel h1').stop().fadeOut(200);
    $('.panel p').stop().fadeOut(200);

    $(".scroll").css({"background": "none", "color": "#B1B1B1"});

    $(this).css({"background": "#00709C", "color": "#fff"});

    event.preventDefault();

    $('.scroll-menu').stop().animate({
        scrollLeft: $('.scroll-menu').scrollLeft() + $(this.hash).offset().left
    }, 1200);
    $('.panel h1').delay( 900 ).fadeIn(500);
    $('.panel p').delay( 900 ).fadeIn(500);
});

我得到了一些帮助，所以实际上我对$(this.hash).offset().left指的是什么感到困惑。

另外，有人可以给我一个关于如何自动动画而不需要点击的想法吗？ 例如，这不起作用。

setInterval(function() {
    $('.scroll-menu').stop().animate({
       scrollLeft: $('.scroll-menu').scrollLeft() + $(this.hash).offset().left
    }, 1200);
    $('.panel h1').delay( 900 ).fadeIn(500);
    $('.panel p').delay( 900 ).fadeIn(500);
    }, 3600);

Answer 1

当然可以，您可以前往： http : //jsfiddle.net/neuroflux/afzVe/617/

和相关代码：

$('#scroll').click(function() {
    $('html,body').animate({
        scrollLeft: $('#test').css('left')
    }, 800, function() {

        $('html, body').animate({
            scrollLeft: 0
        }, 800);

    });
});

Answer 2

假设您有一个如下所示的anchor标记：

<a href="#foo" class="scroll">Some anchor</a>

this.hash上anchor click返回"#foo"这也是一个有效的ID选择。 因此， $(this.hash)与$("#foo") ，并将选择ID foo的元素和$(this.hash).offset().top基本返回元素#foo top

关于你提到的第二个问题，它很清楚，以你想要什么实例animate在自动，但仍setInterval ，因为你是指$(this.hash)和自不是一个有效的element也可以先试着保持元素变量，然后应用如下所示的hash功能：

var elem=$(".scroll");//store it globally

setInterval(function() {
    $('.scroll-menu').stop().animate({
       scrollLeft: $('.scroll-menu').scrollLeft() + $(elem.hash).offset().left
    }, 1200);
    $('.panel h1').delay( 900 ).fadeIn(500);
    $('.panel p').delay( 900 ).fadeIn(500);
}, 3600);