javascript - CSS3 + Jquery 滚动动画

Question

我有一组图标，我希望在向下滚动时使用动画 slideLeft 一个一个地显示这些图标。我找到了这个 css3 动画

http://www.justinaguilar.com/animations/index.html#

这是一个 fiddle JS FIDDLE

这是我的HTML

                    <div id="create" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft">
                        <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 slideLeft">
                        <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 slideLeft">
                        <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 slideLeft">
                        <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 slideLeft">
                        <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>
                </div>

这是我的图标 CSS。

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

这是我的 Jquery。

        $(window).scroll(function() {
    $('#create').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideLeft");
        }
    });
});

$(window).scroll(function() {
    $('#define').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideLeft");
        }
    });
});

$(window).scroll(function() {
    $('#sync').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideLeft");
        }
    });
});

$(window).scroll(function() {
    $('#cloud').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideLeft");
        }
    });
});

$(window).scroll(function() {
    $('#scale').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideLeft");
        }
    });
});

它工作正常，但我的问题是，我希望每 3 或 5 秒一个一个地可见。

请帮忙

Answer 1

你可以使用

setTimeout(myfunction(), 3000); 

3 秒后调用 myfunction。递归调用你再次把线 setTimeout(myfunction, 3000);在我的函数中。

在 myfunction 中，您可以首先设置所有图像的 css 属性“visibility: hidden;”然后更改特定图像的属性“visibility: visible;”

在你的情况下是这样的

$(".img-circle").css({visibility: hidden})
$("#cloud .img-circle").css({visibility: visible})

您应该跟踪要显示的图像

希望对您有所帮助。