0

我正在尝试更改滚动事件的 css 并且它正在工作。

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

但是，当我尝试延迟并改回来时，

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

它总是显示粉红色，但我希望先是白色，然后是延迟，然后是粉红色。

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

4

3 回答 3

1

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

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

在jsFiddle上。

于 2013-09-04T15:36:38.730 回答
0

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

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

这1意味着动画的长度为 1 毫秒，肉眼看不到，但我在使用零时遇到了问题，所以我只添加了一个值来满足回调。

于 2013-09-04T15:02:46.877 回答
0

delay() 函数仅适用于jQuery 效果队列，而不适用于所有函数。效果如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")
    });
});
  1. animate 的第一个参数是您希望设置动画的 CSS 属性。由于 background-color 不能动画，我们在这里使用一个虚拟属性（你可以在这里使用任何东西，没有任何区别）。
  2. 第二个参数是动画的时间。我们在这里只使用 1 毫秒，因为我们使用 delay() 函数设置了真正的延迟。
  3. 第三个参数是缓动（在这种情况下无关紧要）。
  4. 第四个参数是一个回调函数，其中 'this' 指向选定的 HTML 元素。所以我们在这里改变它的背景颜色。
于 2013-09-04T15:45:38.267 回答