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元素基本上返回元素{{1}的top }}

关于你的第二个问题，由于你所指的#foo并且因为它不是有效的{animate，所以你自己setInterval自动$(this.hash)但仍然在element的实例中还不清楚1}}你可以先尝试将元素保存在变量中，然后应用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);

使用jquery

2 个答案: