Question

我正在尝试创建一个执行以下操作的脚本：

通过滚动（.clients，偏移量为500px
触发此事件后，img div中包含的.clients开始淡出
每个项目之间稍有延迟淡入（因此它们按顺序淡入）

由于我的代码的其他部分，淡入必须更改opacity:1且不能.fadeIn()

我在那里，但有一些问题。这是我的代码：

var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset-500 ) {
        $('.home .clients img').each(function(index){
            console.log(index);
            $(this).delay(500 * index).css('opacity','1');
        });
     }
});

第一个问题

事件会在页面中正确的滚动点触发，但继续触发。我希望只触发一次，然后不再注册。当达到500以上.clients时，事件应该触发，而不再触发。

第二个问题

我的.each()似乎无法正常工作。一切都消失了。我在淡入淡出之间制作小.delay()的方法似乎不起作用。我尝试将index乘以500.所以第一个索引是0，所以它会立即触发。第二个索引是1所以它应该在500毫秒之后触发，依此类推。我想弄清楚为什么这种方法不起作用。

任何帮助表示赞赏。我很感激尝试使代码在上面工作，而不是写一些全新的东西，除非这是唯一的方法。我很感激解释我做错了所以我可以学习，而不仅仅是纯粹的代码答案。

JSFiddle

Answer 1

西德尼袭击了大部分问题，除了一个。 scroll事件多次触发，因此它会多次检查条件，然后实际多次设置动画。为了防止这种情况发生，我通常想添加另一个布尔值来检查进程是否已经触发。我简化了代码以使更改更清晰。

var working = false;
$(window).on('scroll', function(){
    if($(window).scrollTop() > 1000 && !working){
        working = true;
        setTimeout(function(){
            working = false;
        }, 500);
    };
});

Answer 2

在帖子下面的评论中提到Tushar，而不是使用.delay()，您可以使用普通setTimeout()。

在.delay()的jQuery文档中，他们提到在某些用例中使用setTimeout实际上更好 - 这是其中之一。

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它并没有提供一种方法取消延迟-.delay（）不能替代JavaScript的原生代码 setTimeout 功能，可能更适合某些用途例。

使用setTimeout您的代码如下所示：

var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function() {
    if ($w.scrollTop() > targetOffset - 500) {
        $('.home .clients img').each(function(index) {
            setTimeout(function() {
               $(this).css('opacity','1'); 
            }, (500 * index));
        });
     }
});

此外，您可以使用.off()

取消绑定活动

所以在你的if ($w.scrollTop() > targetOffset - 500) { ... } 你可以添加一个如下所示的行：

$(window).off('scroll');

哪个会从窗口对象中取消绑定滚动处理程序。您也可以稍后再使用.on()重新附加它。（使用on()，您可以一次绑定多个事件，允许您为多个处理程序编写相同的代码一次。）

Answer 3

请更改您的jquery代码，但它只会触发一次事件，并且可能符合您的要求： -

var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function () {
    if ($w.scrollTop() == 1300) {
        console.log('here!');

        $('.clients img').each(function (index) {
            $(this).delay(5000 * index).css('opacity', '1');
        });
    }
});

在这里，我将滚动高度增加到1300，以显示您可以动态获取的不透明效果，如果您想要500，那么请更改css如下。

.scroll {
    height:700px;
}

.delay（）通过乘以索引号来实现.css（）动作

第一个问题

第二个问题

JSFiddle

3 个答案: