Question

我正在尝试更改滚动事件的css，它正在运行。

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink")
});

但是，当我试图给予延迟并将其改回时，

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink")
        .delay( 5000 )
        .css("background-color", "white");
});

它总是呈现粉红色，但我想先将白色延迟然后再变成粉红色。

有人可以帮我这个！提前谢谢

Answer 1

尝试仅使用setTimeout，不使用animate：

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink");
    setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000);
});

此处jsFiddle。

Answer 2

我想到的第一件事就是使用.animate()来获取回调，然后使用setTimeout来延迟返回CSS：

$(window).scroll(function(){
    $('.navcont').animate({backgroundColor:'pink'},1,function(){
        var $this = $(this);
            setTimeout(function(){
                $this.css({backgroundColor:'white'});
            },80000);
    });
});

1意味着动画的长度为1毫秒，这对于眼睛来说是不可见的，但我遇到了使用零的问题所以我只需添加一个值来满足回调。

Answer 3

delay（）函数仅适用于jQuery effects queue，而不适用于所有函数。效果如fadeIn，slideUp等。有一个名为animate（）的自定义效果生成器，您可以将它与delay（）一起使用。但是，您无法为背景颜色等非数字属性设置动画。所以这是一个技巧 -

$(window).scroll(function () {
    $(".navcont")
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){
        $(this).css("background-color","pink")
    })
    .delay( 80000 )
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){
        $(this).css("background-color","blue")
    });
});

animate的第一个参数是您希望设置动画的css属性。由于背景颜色无法动画，我们在这里使用虚拟属性（你可以在这里使用任何东西，没有任何区别）。
第二个参数是动画的时间。我们在这里只使用1毫秒，因为我们使用delay（）函数设置实际延迟。
第三个参数是宽松（在这种情况下无关紧要）。
第四个参数是一个回调函数，其中'this'指向所选的HTML元素。所以我们在这里改变它的背景颜色。

滚动事件上的Javascript更改css然后等待然后重新更改

3 个答案: