1

我正在一个移动网站上工作，如果 10 秒内没有触摸事件，我需要显示幻灯片。我已经尝试了很多东西，但还没有完全做到。

这是我到目前为止的代码：

window.setTimeout(function(){
    $('#slideshow').show();
    $('#slideshow').animate({
        opacity:1   
    }, 800);
}, 3000);

$('#slideshow').click(function(){
    //alert('helo');
    $('#slideshow').animate({
        opacity:0   
    }, 800, function(){
        $('#slideshow').hide();
    });

});

这可行，但我需要在这么多秒的不活动后触发显示和不透明动画。任何人都做过这个并且有一个快速的解决方案。谢谢

更新代码：

    var waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);

    var activity = $(window).click();

    $(document).on('activity', function() { 
        clearTimeout(waiting); 
            waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);
    });

    $('#slideshow').click(function(){
        $('#slideshow').animate({
            opacity:0   
        }, 800, function(){
            $('#slideshow').hide();
        });

    });

这还不是很有效......最初它确实有效。幻灯片确实会等待 3 秒才会出现，如果有任何活动，幻灯片会持续重置，但幻灯片已经出现然后被删除它不会重新出现...？

任何想法谢谢

4

1 回答 1

2

定义“活动”，每当触发“活动”时，让它清除 setTimeout，然后再次启动它。

var waiting = window.setTimeout(function(){ });
$(document).on('activity', (function() { 
    clearTimeout(waiting); 
    waiting = window.setTimeout(function(){ });
});
于 2013-03-05T16:01:17.523 回答