Question

请看下面的演示。点击下一步我滚动它但我想在结束时隐藏下一个。我怎么知道何时停止滚动

JS

$("span").click(function(){ 
    $('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
    $( "div.demo" ).animate({
        scrollLeft: $( "div.demo" ).scrollLeft() + 800
    });
});

ps：800中的演示只是为了轻松

Answer 1

像这样动画完成后运行一个函数 http://api.jquery.com/animate/

$('selector').animate(
{
    right : "100px", 
}, 500,
function() {
    $('selector').hide(); // this will run after the animation is complete 
}
);

Answer 2

您想使用scroll()事件侦听器。每当滚动demo div时，请检查其左侧的当前位置，如果它大于某个阈值，请隐藏“＆＃39; next＆＃39;

”

在$("span").click()代码后添加此JS：

var leftPos;
$(".demo").scroll(function(event){
    leftPos = $(".demo").scrollLeft();
    if(leftPos > 700){
        $("span").hide();
    }else{
        $("span").show();
    }
});

Answer 3

使用animate的回调功能

$("span").click(function(){ 
        $('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
        $( "div.demo" ).animate({
            scrollLeft: $( "div.demo" ).scrollLeft() + 800
        },function() {
    $('span').hide();
  });
    });

何时停止滚动

3 个答案: