使用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);