Jquery Retard pour les faire défiler

Salut, j'ai mis des icônes que je veux afficher un par un quand il faites défiler vers le bas.

J'ai utilisé http://www.justinaguilar.com/animations/ pour les animations.

Comment puis-je ajouter de la fonction de temporisation sur mon jquery de sorte qu'il sera visible, un par un?
Tous les plugins qui peuvent alterner ce genre d'effet?

Des suggestions?

Merci les gars

Jquery Retard pour les faire défiler

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>

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);
}
});
});

OriginalL'auteur Alyssa Reyes | 2014-03-13

  1. 1

    Essayer quelque chose comme cela

    $(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/1/

    WOW! merci youuuuu! - Je l'appliquer sur mon site, il fonctionne parfaitement!

    OriginalL'auteur sabithpocker

  2. 1

    Vous pouvez ajouter un délai à l'aide de la fonction javascript setTimeOut()

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

    OriginalL'auteur 18bytes