javascript 滚动的 Jquery 延迟

Jquery Delay for on scroll

提问by Alyssa Reyes

Hi I have set of icons that I want to display one by one when it scroll down.

嗨，我有一组图标，我想在向下滚动时一个一个地显示。

I used http://www.justinaguilar.com/animations/for the animations.

我使用http://www.justinaguilar.com/animations/制作动画。

How can I add the delay function on my jquery so it will be visible one by one? Any plugins that can alternate this kind of effect?

如何在我的 jquery 上添加延迟功能，使其一一可见？任何可以替代这种效果的插件？

Any suggestions?

有什么建议？

Thanks guys

多谢你们

html code

html代码

     <div id="create" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">
                    <img src="//placehold.it/80x80" alt="folder" class="img-circle">
                    <div class="clear"></div>
                    <i class="fa fa-user fa-5x m-t10"></i>
                    <h4>Create an account</h4>
                </div>

                <div id="define" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">

                    <img src="//placehold.it/80x80" alt="folder" class="img-circle">
                    <div class="clear"></div>
                    <i class="fa fa-pencil-square-o fa-5x m-t10"></i>
                    <h4>Define your API</h4>

                </div>

                <div id="sync" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">

                    <img src="//placehold.it/80x80" alt="folder" class="img-circle">
                    <div class="clear"></div>
                    <i class="fa fa-refresh fa-5x m-t10"></i>
                    <h4>Sync the local client</h4>

                </div>

                <div id="cloud" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20" >

                    <img src="//placehold.it/80x80" alt="folder" class="img-circle">
                    <div class="clear"></div>
                    <i class="fa fa-cloud fa-5x m-t10"></i>
                    <h4>Get data from the cloud</h4>

                </div>

                <div id="scale" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">

                    <img src="//placehold.it/80x80" alt="folder" class="img-circle">
                    <div class="clear"></div>
                    <i class="fa fa-bar-chart-o fa-5x m-t10"></i>
                    <h4>Scale as required</h4>

                </div>

css code

css代码

#create, #define, #sync, #cloud, #scale
{
  visibility:hidden;
}

jquery code

查询代码

$(window).scroll(function () {
    $('#kinect-logo').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).addClass("slideUp");
        }
    });
    $('#create').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).delay(300).addClass("fadeIn");
        }
    });
    $('#define').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).addClass("fadeIn");
        }
    });

    $('#sync').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).addClass("fadeIn");
        }
    });

    $('#cloud').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).addClass("fadeIn");
        }
    });

    $('#scale').each(function () {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).addClass("fadeIn").delay(300);
        }
    });
});

采纳答案by sabithpocker

Try something like this

尝试这样的事情

$(window).scroll(function () {
    $('#kinect-logo,#create,#define,#sync,#cloud,#scale').each(function (index,element) {
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).delay(index*600).queue(function(){
                $(this).addClass("slideUp").dequeue();
            });
        }
    });

});

http://jsfiddle.net/hEuC3/

http://jsfiddle.net/hEuC3/

http://jsfiddle.net/hEuC3/1/

http://jsfiddle.net/hEuC3/1/

回答by 18bytes

You can add a delay using the java script function setTimeOut()

您可以使用 java 脚本函数 setTimeOut() 添加延迟

setTimeout(function (){
// Code you want to delay or you can call the function reference directly instead of defining one
}, 2000);