Question

我希望在第一次加载网页时显示动画箭头，并在用户滚动时禁用它。

通常我可以这样做：

Phaser method

this.time.events.add(200, function() { 
   MyGame.calculateDimensions();            
   this.scale.setGameSize(MyGame.canvasWidth, MyGame.canvasHeight);        
}, this);


jQuery method

$(window).resize(function() { resizeGame(); } );
    function resizeGame() {

    var innerWidth = window.innerWidth;
    var innerHeight = window.innerHeight;
    var gameRatio = innerWidth/innerHeight;

    game.width = Math.ceil(320*gameRatio);
    game.height = 320;
    game.stage.bounds.width = Math.ceil(320*gameRatio);
    game.stage.bounds.height = 320;
    game.scale.refresh();

}

然而，我的网站有一些插件允许水平滚动，我认为这是阻止它工作。

有没有办法隐藏不基于滚动检测的动画？

http://codepen.io/sol_b/pen/ORGKbP

感谢。

编辑：我使用的插件是jquery kinetic和jquery鼠标滚轮。

Answer 1

您可以在jquery中执行以下操作。

jQuery(window).scroll(function() {
    document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});

这将在滚动时停止动画，但这会导致滚动停止时无法播放动画的问题。你可以使用这个功能

$.fn.scrollStopped = function(callback) {
    var that = this, $this = $(that);
    $this.scroll(function(ev) {
        clearTimeout($this.data('scrollTimeout'));
        $this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
    });
};

然后在滚动停止时，您可以再次启动动画。

$(window).scrollStopped(function(ev){
    document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});

Answer 2

如果允许水平滚动的插件有官方文档，那么你应该寻找一个回调方法。就像当用户滚动时，这个叫做被调用。在回调中，您可以隐藏箭头（或.fadeOut（）imo）......

Answer 3

我能够通过用我的内容包装器替换'window'来解决这个问题。像这样：

jQuery('#wrapper').scroll(function() {
    jQuery('.arrow').css("display", "none");
});

如何在滚动时停止CSS动画？

3 个答案: