Question

所以，在这个项目中，我有一个sprite（cat），它有三个可能的类，取决于lastScroll，.stillkitty在休息时，.walkingkitty在向下滚动时，和.backkitty在向上滚动时。它们工作正常，但我也希望在指定的时间段后将其重置为初始类（.stillkitty）。当前的编码超时似乎仅适用于第一个向下滚动，如何在内部滚动时让我如何工作 - 让我们说3000ms？这是网站http://dtc-wsuv.org/jcohen/inprogress/

的jQuery

// Kitty Sprite
            var lastScroll = 0;

            $(document).ready(function($) {
                $('#kittysprite').addClass('stillkitty');

                $(window).scroll(function(){
                    var scroll = $(window).scrollTop();
                    if (scroll > lastScroll) {
                        $('#kittysprite').removeClass().addClass('walkingkitty');
                    } 
                    else if (scroll < lastScroll) {
                        $('#kittysprite').removeClass('walkingkitty').addClass('backkitty');
                    }
                    else  {
                        setTimeout(function() {
                            $('#kittysprite').removeClass().addClass('stillkitty');
                        }, 3000);
                    }

                    lastScroll = scroll;
                });
            });

HTML

<div id='kittysprite' class='stillkitty'></div>

CSS

.stillkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: stillkitty 4s steps(15) infinite;
    background: url(images/stillkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes stillkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1125px; }
    }


.walkingkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: walkingkitty 1s steps(5) infinite;
    background: url(images/walkingkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes walkingkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -375px; }
    }

.backkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: backkitty 1s steps(4) infinite;
    background: url(images/backkitty.png) 0 0 no-repeat; 
    height: 75px;
    width: 150px;
    }

@keyframes backkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -300px; }
    }

Answer 1

setTimeOut只执行一次。尝试使用setInterval。

这是一个简单的小提琴 - Fiddle

还有一件事：你需要检查用户是否没有滚动然后运行你的代码：

var lastScroll = 0;
var isScrolling = false;

$(document).ready(function($) {
    $('#kittysprite').addClass('stillkitty');

    //run every 3000ms and see if user is not scrolling then reset
    setInterval(function() {
        if(!isScrolling){
            $('#kittysprite').removeClass().addClass('stillkitty');
        }
    }, 3000);

    $(window).scroll(function(){
        //User is scrolling
        isScrolling = true;

        //Reset the timeout
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // User is not scrolling
            isScrolling = false;
        }, 250));

        var scroll = $(window).scrollTop();
        if (scroll > lastScroll) {
            $('#kittysprite').removeClass().addClass('walkingkitty');
        } 
        else if (scroll < lastScroll) {
            $('#kittysprite').removeClass('walkingkitty').addClass('backkitty');
        }

        lastScroll = scroll;
    });
});

参考文献：Not Scrolling

在if else if else语句上超时？

1 个答案: