CSS3 + Jquery動畫滾動

Question

我有一組圖標，希望在向下滾動時使用動畫slideLeft使其一目了然。 我發現這個css3動畫

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

這是它的小提琴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;”。 然后更改垂直圖像“可見性：可見”的屬性

在你的情況下像這樣

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

您應該跟蹤要顯示的圖像

希望這會有所幫助。